cookie、localStorage和sessionStorage三者的异同及API

一、共同点

共同点：都是保存到浏览器端，且是同源的

二、不同点

1.与服务器的数据交换方式不同

Cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器之间来回传递，而Sessionstorage 和Localstorage不会把数据发给服务端，尽在本地保存

2.存储大小限制不同

Cookie数据不能超过4k，同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据，Sessionstorage 和Localstorage虽然也有存储大小的限制，但是比cookie大的多，可以达到5M或者更大。

3.数据有效期不同

Sessionstorage 只在当前浏览器关闭窗口之前有效，自然也不能持久保持
Localstorage始终有效，窗口或者浏览器关闭的时候也会一直保持，因此作为持久数据，cookie 只在设置的cookie过期内有效，及时关闭浏览器或者窗口。
4.作用域不同

4.是否同源窗口共享

Sessionstorage 和Localstorage不在不同的浏览器窗口中共享
而cookie是在所有同源窗口中共享的

sessionstorage在不同的页面和标签间无法共享，跳转可以，如果复制URL是不行的

5.cookie可以设置有效期，路径和域

cookie可以设置有效期，路径和域

三、API

1. cookie API

//存储
document.cookie="username=John Doe";
//读取
var x = document.cookie;
//清空
document.cookie = "username=;";

2. Localstorage API

存储和读取要是字符串
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() 方法将数据转换为 JavaScript 对象。

//存储
localStorage.setItem(key, JSON.stringify(value));
//读取
JSON.parse((localStorage.getItem(key));
//清空
localStorage.removeItem(key);
//删除全部
localStorage.clear();

3. sessionStorage API

//存储
sessionStorage.setItem("key", "value");
//读取
lastname = sessionStorage.getItem("key");
//清空
sessionStorage.removeItem("key");
//删除全部
sessionStorage.clear();