数据持久化之cookie、localStorage、sessionStorage

数据持久化（数据本地化）是一种将数据“长久”的保存在客户端的技术操作

※ cookie

    由于cookie是存储在客户端本地的，因此可以作为一些必要信息的存储容器（登录信息）。

① 前端设置cookie

    写入：document.cookie = "key=value;expires=过期时间戳";

    读取：document.cookie;

    删除：document.cookie = "key=value;expires=当前时间戳+1";

/*
* 参数必须传入字符串或者数字（用引号包裹）
* 设置, setCookie(key, value, expires);
* 获取, getCookie(key);
* 删除, removeCookie(key);
*/
// 封装设置cookie的函数
function setCookie (key, value, expires){
    var delayExpires = new Date(new Date().getTime() + 1000 * expires).toGMTString();
    document.cookie = key + "=" + escape(value) + ";expires=" + delayExpires;
}
// 封装获取cookie的函数
function getCookie (key){
    var cookie = document.cookie;
    if(cookie){
        var obj = {};
        var arr = cookie.split(";");
        for(var i=0; i<arr.length; i++){
            var tempArr = arr[i].split("=");
            obj[tempArr[0]] = unescape(tempArr[1]);
        }
        return obj[key];
    }else{
        return "";
    }
}
// 封装删除cookie的函数
function removeCookie (key){
    var curExpires = new Date(new Date().getTime() + 1).toGMTString(); // 只需将过期时间设置为当前时间之前或者1ms之后即可
    document.cookie = key + "='';expires=" + curExpires; 
}

②后端为前端添加cookie

    注： 谁访问了这个php后台文件，就给谁添加一个cookie

    1) 设置cookie

    syntax :    setcookie("key", "value", "expires", "path", "domain");

    eg: setcookie("uname", "Martin", time()+60, "/", "localhost"); // php里时间单位是秒

    2) 读取cookie

       使用$_COOKIE对象直接获取cookie。比如: echo $_COOKIE["username"];

    3) 删除cookie

        setcookie("key", "value", time()-1, "/", "localhost"); // path用/表示在根目录都有效

※ localStorage，sessionStorage

    localStorage中存储的数据，只要不被用户主动删除就会永远保存。

    sessionStorage中存储的数据，只要用户不关闭页面，就会一直存在，直到关闭为止。

    对于两者而言，读取不存在的key值，返回null。

    syntax： 

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

                localStotage.getItem("key");

                localStorage.removeItem("key");

                sessionStorage.setItem("key", "value");

                sessionStorage.getItem("key");

                sessionStorage.removeItem("key");