localStorage与sessionStorage

localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。

相同点

• 都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带。
• 都是以键值对的形式存在，即Key-Value形式，常用的Api也相同。
• 存储类型都是String类型，当进行存储时，会调用toString()方法转为String类型。
• 对于每个域容量是有限的，不同浏览器不一样，大部分存储为5M左右。

不同点

• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• SessionStorage会在用户关闭浏览器后，即会话结束后，数据失效；SessionStorage与服务端Session无关。

数据共享限制

• 不同浏览器无法共享localStorage或sessionStorage中的信息。
• 相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口）数据
• 不同页面或标签页间无法共享sessionStorage的信息
• 如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

常用操作

• 储存数据

1localStorage.setItem('key', 'value');
2sessionStorage.setItem('key', 'value');
3/**
4 * 由于存储数据会调用 toString() 方法
5 * Object 类型会存储为 [object Object] 字符串
6 * 所以进行存储时需调用 JSON.stringify() 转化为字符串
7 * 取出时调用 JSON.parse() 将字符串转回对象
8 */

• 读取数据

1localStorage.getItem('key');
2sessionStorage.getItem('key');

• 删除数据

1localStorage.removeItem('key');
2sessionStorage.removeItem('key');

• 清空数据

1localStorage.clear();
2sessionStorage.clear();