Local Storage和Session Storage详解

1. 来历

在HTML5中新加了Web Storage的储存方式，主要是为了弥补Cookie储存容量的不足。Web Storage分为Local Storage和 Session Storage。

2. 优缺点

优点

• Web Storage 拓展了 cookie 的 4K 限制。
• Web Storage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
• 请求时不会带Web Storage的内容。

缺点

• 目前所有的浏览器中都会把Web Storage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
• Web Storage在浏览器的隐私模式下面是不可读取的。
• Web Storage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
• Web Storage不能被爬虫抓取到。
• 无法跨域

3. Local Storage和Session Storage的不同

• Local Storage与 Session Storage的唯一一点区别就是 Local Storage属于永久性存储，而 Session Storage属于当会话结束的时候，Session Storage中的键值对会被清空。
• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
  而sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

4. 使用方法

Local Storage和Session Storage的API是相同的，下面以Local Storage为例讲解。

• 增

/*value会被调用 .toString方法转化成字符串。因此，如果要储存的对象，
调用JSON.stringify(obj)来序列化成字符串
*/
localStorage.setItem('key', 'value');
localStorage.key = "value"
localStorage["key"] = "value"

• 删

localStorage.removeItem('key');//删除某一个localStorage
localStorage.clear();//清空所有localStorage
delete localStorage.key

• 改

localStorage.setItem('key', 'value');
localStorage.key = "value"

• 查

localStorage.key
localStorage["key"]
localStorage.getItem('key');
localStorage.key(index);//localStorage数组中下标是index的key,类数组。

官方推荐的是getItem\setItem这两种方法对其进行存取.

5. 用处

可以用来存储图片、资源等等。

HTML5本地存储优于cookie的一点就是不需要网络传输。cookie每次请求被发送到服务器，占用额外带宽，为了节省这部分资源一些优化手段是把静态资划分单独的域名（当然这样做还有其他作用）。而使用localstorage就不用担心额外传输问题了。

更高深的作用我还不会…

6. 相关小知识点

window.open 打开的新页签会携带sessionStorage中的数据，而a标签打开的不会

 
 

参考文献

• https://www.runoob.com/jsref/prop-win-localstorage.html