前端缓存方法实现cookie/sessionStorage/localStorage

前端存储有localStorage、sessionStorage、cookie三种方式。

那么它们各自的缓存方法是如何实现的呢？本文将以cookie为主来实现缓存方法。

一、cookie

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

1）cookie的设置
关于过期时间：默认情况下，cookie 在浏览器关闭时删除；
关于路径：默认情况下，cookie 属于当前页面。（cookie的另一属性domain是对应服务器的，服务器下面包含路径）

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2）读取cookie

var myCookie = document.cookie;

3）修改cookie
修改 cookie 类似于创建 cookie，旧的cookie将被覆盖。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

4）删除cookie
只需要设置 expires 参数为以前的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

cookie创建、读取和展示的完整实例方法实现见下（有参考）。

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
    // 得到GMT时间
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

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 "";
}

function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

二、sessionStorage、localStorage

两者类似，下面仅以localStorage为例说明。
localStorage本质上是对字符串的读取，有Json格式时需要JSON.stringify()转化为字符串。
1）存储数据

localStorage.setItem('key', 'value');

2）读取数据

localStorage.getItem('key');

3）删除数据

localStorage.removeItem('key');

4）更改数据

localStorage.setItem('key', 'newValue');