HTML5 Web存储-localStorage、sessionStorage

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.
这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

存储方式

键/值对通常以字符串存储

localStorage.setItem('test',{name:123})
localStorage.getItem('test')//   "[object Object]"
localStorage.setItem('test',[123,1,3])
localStorage.getItem('test')//   "123,1,3"

api

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

localStorage

• 数据没有时间限制，需手动删除
• 打开多个窗口共享同一数据
• 大小5m左右
• 可触发storage事件

sessionStorage

• 当用户关闭浏览器窗口后，数据会被删除。(刷新不会清除)
• 不同窗口标签页的同一页面数据不共享
• 大小5m左右
• 可触发storage事件

cookie

• 可设置过期时间，不设置时保存在内存中当前会话结束删除，设置后保存在硬盘中
• 同源共享
• http请求时自动携带
• 大小4k左右