localstorage、sessionstorage和cookie的区别（面试常问）

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

Storage 存储

Window.sessionStorage
window.localStorage
(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)

特性

1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约5M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

window.localStorage

1、永久生效，除非手动删除
2、可以多窗口共享

方法详解

setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容

总结

• 三者共同点是都可以在本地进行数据存储，而且都是同源的
• cookie 储存的信息非常小 只有4k 生存周期可以设置 默认是浏览器关闭
  存储的数据每次都包含在http请求中往返于客户端与服务端之间（想想就麻烦）
• localstorage 和sessionstorage统称为web storage,是html5新增加的一种数据存储机制
• localstorage的存储大小有5M,生存周期是永久的，除非手动删除
• sessionstorage的存储大小也是5M，生命周期是到关闭浏览器窗口
• Web Storage 只会存储在客户端，并不会发送到服务器，支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

为什么选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。