JavaScript 数据持久化：localStorage、sessionStorage、cookie

注意：存储的值必须是字符串，如果存储的值是对象，必须使用JSON.stringify()方法转化成JSON字符串，然后在获取的时候使用 JSON.parse() 方法反转成对象

1. localStorage 本地存储

// 设置
window.localStorage.setItem(key, value);

// 获取
window.localStorage.getItem(key);

// 删除 指定的
window.localStorage.removeItem(key);

// 删除 所有的
window.localStorage.clear();

2. sessionStorage 会话存储

// 设置
window.sessionStorage.setItem(key, value);

// 获取
window.sessionStorage.getItem(key);

// 删除 指定的
window.sessionStorage.removeItem(key);

// 删除 所有的
window.sessionStorage.clear();

3. cookie

注意：cookie 的所有操作，必须启动本地服务或者在线上的浏览器上才可生效

1. cookie 常用的属性
   expires 属性 和 Max-Age 属性都可以用来定义 cookie 的有效时间，一起使用 Max-Age 的优先级更高

   
   
   cookie的常用属性.png

2. cookie 的设置、获取、删除

// 设置 cookie
// 不是覆盖整个 cookie，而是： 原cookie + cname=cvalue; （同名修改，异名添加）
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

// 获取 cookie 中的某个参数值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}

// 获取整个 cookie
// document.cookie

// 检测 cookie 中的某个参数值是否存在
function checkCookie(cname){
    var user=getCookie("cname");
    if (user!=""){
        return true
       // 存在
    }else {
        return false
       // 不存在
    }
}

//清除 cookie
// 将过期时间调整到以前,即可删除 cookie
function clearCookie(cname) {
    setCookie(cname, "", -1);
}

启动本地服务进行测试

// 1. 全局安装 http-server
cnpm install http-server -g

// 2. cmd 打开本地项目文件夹
http-server -p 9090

// 3. 浏览器打开本地项目
http://localhost:9090/本地文件.html

4. localStorage、sessionStorage、cookie 对比

前端数据持久化.png