[2023本地存储方案](https://www.cnblogs.com/fangchaoduan/p/17608006.html)

2023本地存储方案

• 本地存储方案

  1. cookie
     • 本地存储：有期限的限制，可以自己设置过期期限。在期限内，不论页面刷新还是关闭，存储的信息都还会存在。
  2. localStorage
     • 本地持久化存储：页面刷新或者关闭，存储的信息一直存在，除非手动清除或者卸载浏览器，而且没有有效期的限制。
  3. sessionStorage
     • 本地会话存储，传话结束-即浏览器页面关闭，存储的信息会自动清除。
     • 但是刷新页面，会话不算结束，基于sessionStorage存储的信息还是会存在的。
       • 比如网页小游戏，游戏窗口没关，都先在本地存。窗口关闭，就把数据存到服务器上。新打开窗口，从服务器拿到数据，再存在会话中。
  4. IndexedDB/WebSQL
     • 本地数据库存储：利用浏览器自带的数据库，基本上都是非关联型数据库。
     • 相对于其它的本地存储方案，其可以存储更多的数据。
  5. 虚拟内存存储
     • 特点：页面刷新或者关闭，存储的信息都会清除掉。
     • 类型
       • 全局变量
       • vuex
       • redux
       • ...
  6. ...
  • 无论那一种本地存储方案，都受到浏览器和源的限制！
    • 源：就是域名。
    • 浏览器就是谷歌浏览器与IE浏览器这类的区别。
    • 即不同源及不同浏览器下，本地存储的内容相互之间是独立的！
  • 不论那一种本地存储方案，都是以明文形式进行存储的！
    • 尽可能不存储需要安全限定的数据，即便要存储，一定要记得加密处理。
  • cookie与localStorage区别：

    • 时效性：cookie可以设置过期时间，而localStorage是持久化存储。

      • 用于灵活控制时效性。
      • 真实项目中，我们需要自己实现一套具备有效期的localStorage存储方案。
        • 
        • 

    • 存储大小：

      • 同源下，cookie最多只允许存储4kb内容。
      • 而localStorage允许最多存储5MB。

    • 稳定性：

      • cookie是不稳定的。
        • 超过大小，有些浏览器是存不进去新的。有些是清除一些旧的cookie的。
        • 基于清除历史记录、安全卫士清扫垃圾等操作，都可能会把存储的cookie给干掉。
          • 但这些操作对localStorage无效！
      • localStorage是比较稳定的。
      • 限制规则：某些浏览器具备隐私模式/无痕浏览模式，在这种模式下，cookie存储的信息必定不会被保留，但是localStorage在新版本浏览器中也会受到影响。
      • 和服务器端的关系：cookie和服务器之间是有猫腻的，而localStorage和服务器端没有直接的关系。
        • 基于cookie存储的信息：
          • 服务器返回给客户端信息的时候，如果有响应头中携带了Set-Cookie字段，则客户端浏览器，会自动在本地设置一个cookie，把Set-Cookie字段中的信息进行存储！
          • 客户端本地只要存储了cookie，不论服务器是否需要，每一次向服务器发请求的时候，浏览器都会自动在请求头中，基于Cookies字段，把本地存储的cookie信息，都传递给服务器！
          • 但是以上的处理，仅限同源访问！
            • 因为在浏览器的非同源策略中，默认是禁止Cookie的传输的！
              • 但是可以在axaj请求中设置一个请求头，让Cookie可以携带给非同源浏览器。
        • 基于localStorage存储的信息，除非手动发送给服务器，否则和服务器没有半毛钱关系！
          • 可以手动从本地存储中取出来，在ajax中附带发送给服务器。
          • 也可以在处理ajax请求函数中，把服务器发送的数据存储到本地存储中。
      • cookie可以兼容到IE5，但是localStorage是H5新增的，只能兼容到IE9及以上浏览器！

• 

•