同源：协议、域名、端口号 三者一样是同源 非同源(跨域)：三者只要有一个不一样就是跨域 对于页面中不经常更新的数据，我们期望能够做一下缓存「缓存周期可以自己来定」

本地存储的解决方案：控制台->Application「可以看到本地存储的信息(明文存储->不安全)」
不论何种存储方案，存储到本地的信息，如果是一些比较因隐私的，最好不存储，存储也一定要加密

  • cookie【常用】
  • webstorage H5新增的 不兼容IE6~8
    • localStorage【常用】
    • sessionStorage【常用】
  • IndexedDB 本地数据库存储

  • WebSQL

    • …


    1. cookie
    document.cookie 【获取cookie】
    document.cookie=’name=xxx’’ 设置cookie
    image.png

    • 兼容所有浏览器 不仅包含IE6~8 还包含IE5
    • cookie能存储的信息比较少：同源【协议 域名 端口号】下最多可存储4KB内容
      • 如果过了4KB内容 他会把之前的挪出一部分
      • 有的浏览器是不让存
    • cookie是有过期时间 和 “域”的限制的「不能跨域访问」
      • 跨域：如在京东下设置的cookie 在百度页面是获取不到的
    • cookie存储的信息非常不稳定
    • 浏览器的无痕浏览器或者隐私模式下是存储不上cookie的
    • 而且基于浏览器清理工具或者一些杀毒软件，清理垃圾信息的时候，即使没过期的cookie也可能被清除掉
    • cookie并不是单纯的本地存储，和服务器之间是有“猫腻”的：每一次向服务器发送请求，客户端都会在请求头中基于Cookies字段，把本地存储的cookie传递给服务器

    • …


      2. localStorage
      localStorage.setItem([key],[value])
      localStorage.getItem([key])
      localStorage.removeItem([key])
      localStorage.clear()
      …
      image.png

  • 不兼容IE6~8

  • 同源下最多可存储5MB，比cookie存储的多很多
  • 永久本地存储，没有过期时间「除非手动清除或者卸载浏览器」;也会受到跨域和跨浏览器的限制;
  • localStorage的稳定性非常好,清除垃圾的时候对他没影响

  • localStorage和服务器没有半毛钱关系


    3. sessionStroage
    语法和特点与localStorage基本一致

  • sessionStroage是会话存储，基于它设置的信息，只要页面不关闭(哪怕是F5刷新)，信息都在，但是页面一关闭，存储的信息都清空了；localStorage是持久化存储，不论刷新还是关闭，信息都在！


    4. 全局变量 & 公共状态管理(vuex/redux)
    都是在开辟的堆栈内存中存储，页面只要刷新和关闭，信息就都没有了…

    fetch

    1. fetch('./data.json').then(response => {
    2.  // response中包含了服务器返回的信息：响应主体信息response.body「ReadableStream可读流信息」,我们需要把可读流信息变为指定的格式
    3.  //   + Response.prototype.json/text/blob/arrayBuffer...
    4.  //   + 执行这些方法中的任何一个，返回结果都是一个promise实例：如果可以把响应主体信息正常转换为指定的格式，则promise的状态是fulfilled、值是转换为的数据内容，如果不能正常转换，则状态是失败的...
    5.  //   + 一但执行了其中的一个方法，再执行其他方法，会出问题
    6.  return response.json();
    7. }).then(value => {
    8.  console.log(value);
    9. });

    image.png

  1. // 直接这样处理，每一次打开页面或者刷新页面，当前请求都需要重新发送「哪怕获取的结果是一样的」；优化：对不不经常更新的数据，我们应该做一下本地存储(临时缓存)；
  2. (function () {
  3.     // 每一次打开/刷新页面，首先看本地是否有缓存，而且是否过期「假设过期时间1min」
  4.     let cache = localStorage.getItem('cache');
  5.     if (cache) {
  6.         cache = JSON.parse(cache);
  7.         if (new Date() - cache.time <= 60000) {
  8.             // 有缓存&没过期
  9.             console.log('从缓存中获取的:', cache.value);
  10.             return;
  11.         }
  12.     }
  13.     fetch('./data.json').then(response => {
  14.         return response.json();
  15.     }).then(value => {
  16.         console.log('从服务器获取的:', value);
  17.         // 获取结果后，我们需要把信息缓存到本地「存储到本地的是字符串」
  18.         localStorage.setItem('cache', JSON.stringify({
  19.             time: +new Date(),
  20.             value
  21.         }));
  22.     });
  23. })();

image.png