本地存储 - 从Cookie到Web Storage，IndexedDB?

[xccjk]

本地存储 - 从Cookie到Web Storage，IndexedDB

cookie

1. cookie本质工作并非本地存储，而是'维持状态'，是一个存储在浏览器里小的文本文件
2. cookie是为了解决HTTP无状态协议怎么区分请求，通过把文本文件添加到HTTP请求上，在浏览器与服务器间携带用户数据，服务器通过cookie来获取客户端的状态
3. cookie是以键值对的形式存在的
4. 缺点
   • cookie不够大
     • 体积只有4kb
   • 过量的cookie会带来巨大的性能浪费
     • cookie是紧跟域名的，通过响应头里的Set-Cookie指定要存储的Cookie值，默认情况下domain被设置为Cookie页面的主机名，也可以手动设置domaind的值
     • Set-Cookie: name=xxx; domain=xcc.com
     • 同一域名下的所有请求，都会携带cookie

Web Storage

1. HTML5专门为浏览器存储而提供的数据存储机制，分为Local Storage与Session Storage
2. 两者区别: 生命周期与作用域不同
   • 生命周期
     • Local Storage为持久化存储，存储数据永远不会过期，唯一方式就是手动删除
     • Session Storage为临时性本地存储，是会话级别的存储，当会话结束(页面关闭)时，存储内容也会被释放
   • 作用域
     • Local Storage、Session Storage和Cookie都遵循同源策略，当Session Storage特别的一点在于，即使是相同域名下的两个页面，只要不是在同一个浏览器窗口中打开，那么他们间的内容就无法共享
3. 特性
   • 存储容量大，根据浏览器的不同，可以达到5-10M之间
   • 不与服务器端通信，只在浏览器端作用
4. 使用
   • 存储数据 setItem()
     • localStorage.setItem('key', value)
   • 读取数据 getItem()
     • localStorage.getItem('key')
   • 删除某一键值数据 removeItem()
     • localStorage.removeItem('key')
   • 清空数据 clear()
     • localStorage.clear()

Local Storage

1. 持久化存储的数据，用来存储一些内容稳定的资源，比如base64的图片字符串
2. 不长更新的css，js等静态资源

Session Storage

1. 更适合存储生命周期和它同步的会话级别的信息