js之旅（十四）js 三种本地存储--localStorage；sessionStorage；cookie

一、localStorage

localStorage将数据存在在本地，并且没有时间限制，一般同源存储大小为5M左右；只有手动删除时localStorage中的数据才会被清理。
保存数据：

localStorage.setItem("test", JSON.stringify(data));

获取数据：

console.log(JSON.parse(localStorage.getItem("test")));

删除数据：

localStorage.removeItem("test");

数据保存位置：

二、sessionStorage

sessionStorage将数据存在在本地，仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，一般同源存储大小为5M左右。
保存数据：

sessionStorage.setItem("test", JSON.stringify(data));

获取数据：

console.log(JSON.parse(sessionStorage.getItem("test")));

删除数据：

sessionStorage.removeItem("test");

数据保存位置：

三、cookie

把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取cookie的），存储大小4k左右，只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
存储数据：

document.cookie = "name='test'&age=8"

获取数据：

console.log(document.cookie);//name='test'&age=8

想要具体获取某个cookie值需要处理字符串。

四、三者的比较

4.1 是否向服务器端传递

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

4.2 数据大小不同

• cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
  存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4.3 数据有效期不同

• sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；（F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭）
• localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；不管是杀毒软件还是浏览器自带的清除历史记录的功能，都不能把localstorage存储的内容移除掉
• cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。使用杀毒软件或者浏览器自带的清除垃圾功能都可能会把存储的cookie给删除掉

4.4 作用域不同

• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面（标签页，窗口）；
• localStorage 在所有同源窗口中都是共享的；
• cookie也是在所有同源窗口中都是共享的。