cookie、sessionStorage和localStorage

基本概念

cookie：存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间（默认过期时间为关闭浏览器时）。 cookie会在每次发送HTTP请求时附加到Cookie头字段，服务器以此得知用户所处的状态。 cookie限制在4kb
sessionStorage：会话存储，存储在本地，不会被发送到服务器上，并且关闭后存储的内容失效。最多可以存储5-10M
localStorage：本地存储，不会被发送到服务器上，默认会永久存储，除非手动删除。最多可以存储5-10M

Storage支持的浏览器版本

imp.png

差异

特性	数据的生命周期	存储大小	发送服务端	易用性
cookie	关闭浏览器实效（可配置）	4kb	携带在HTTP头中	差
sessionStorage	当前会话下有效，关闭页面或浏览器后被清除	5mb	需要在代码里主动上传服务端	好
localStorage	永久有效，除非手动删除	5mb	需要在代码里主动上传服务端	好

使用

cookie：

//记录cookie值
function setCookie (name,value){
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
};
//获取cookie值
function getCookie (name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr !== null){
        return unescape(arr[2]);
     }else{
         return null;
     }
};
//删除cookie值
function deleteCookie (name) {
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    document.cookie = name + "=; expires=" + exp.toGMTString();
};

sessionStorage：

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

localStorage：

// 保存数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据
var data = localStorage.getItem('key');

// 从localStorage删除保存的数据
localStorage.removeItem('key');

// 从localStorage删除所有保存的数据
localStorage.clear();