Cookie、LocalStorage、SessionStorage

Cookie、LocalStorage、SessionStorage

一、基本概念

1、Cookie

cookie非常小，大小限制大约4k左右，通常用来报存用户信息等操作。

2、localStorage

localStorage 是 HTML5 标准中新加入的技术。

3、sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

二、三者的异同

特性	Cookie	localStorage	sessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间；如果由浏览器端生成，默认关闭浏览器时失效	除非被清楚，否则永久有效	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4k左右	一般为5M	一般为5M
与服务器端通信	每次请求都会携带在http头中，如果使用cookie存储过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

三、localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

//setItem存储value
//用途：将value存储到key字段
sessionStorage.setItem("key", "value");    
localStorage.setItem("site", "js8.in");

//getItem获取value
//用途：获取指定key本地存储的值
var value = sessionStorage.getItem("key");     
var site = localStorage.getItem("site");

//removeItem删除key
//用途：删除指定key本地存储的值
sessionStorage.removeItem("key");     
localStorage.removeItem("site");

//clear清除所有的key/value
//用途：清除所有的key/value
essionStorage.clear();     
localStorage.clear();