回忆下JavaScript 三大数据存储方法：localStorage、sessionStorage、cookie

回忆下JavaScript 三大数据存储方法：localStorage、sessionStorage、cookie。

localStorage 本地存储

// 设置
window.localStorage.setItem(key, value);
 
// 获取
window.localStorage.getItem(key);
 
// 删除 指定的
window.localStorage.removeItem(key);
 
// 删除 所有的
window.localStorage.clear();

sessionStorage 会话存储

// 设置
window.sessionStorage.setItem(key, value);
 
// 获取
window.sessionStorage.getItem(key);
 
// 删除 指定的
window.sessionStorage.removeItem(key);
 
// 删除 所有的
window.sessionStorage.clear();

cookie

cookie 常用的属性

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

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

localStorage、sessionStorage、cookie 对比