本地缓存

浏览器缓存与本地缓存的区别

浏览器缓存：

只服务于单个网页
任何网页都具有网页缓存
不安全，不可靠，不知道网站缓存了哪些网页，以及缓存了网页上的哪些资源

本地缓存：

为整个Web应用程序服务的
只缓存指定缓存的网页
可靠，可以控制对哪些内容进行缓存，不对哪些内容进行缓存，还可以用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更为强大的离线应用程序

本地缓存------cookie

1.浏览器Cookie：支持的数据存储量相对较少，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，有些浏览器甚至不支持；同时，Cookie存在安全性问题，如果cookie被人拦截了，就可以取得所有的session信息。
2.所有浏览器对cookie都支持。
3.cookie存储数据方法：
Cookie.write("testKey", cookie);
Cookie.read("testKey");

本地缓存-------localstorage,sessionStorage:

1.localstorage：本地存储，浏览器关闭也不会清除数据。在浏览器上清除缓存，数据会被清除。sessionStorage：会话存储，浏览器关闭会清除数据。
2.本地存储，有5M大小。
3.支持IE8+,chrome4.0+，Firefox3.0+，opera10.5+,safari4.0+,移动设备iphone 2.0+,android 2.0+.

了解更多sessionStorage、localStorage、cookie

下面是对cookie的函数封装

var Cookie = {
    //添加cookie 或 修改 cookie
    // key:键
    // value:值
    // expiresDay:过期时间（单位：天）
    setCookie : function (key, value, expiresDay) {
        var date = new Date();
        date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
//      为了测试方便先写死10秒后过期
//      date.setTime(date.getTime() + 10 * 1000);
        document.cookie = key + "=" + escape(value) + ";expires=" + date.toGMTString();
    },
    //批量增加
    //cookieObj是对象
    setCookies : function (cookieObj, expiresDay) {
        var date = new Date();
        date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
        for (var tempProp in cookieObj) {
            document.cookie = tempProp + "=" + escape(cookieObj[tempProp]) + ";expires=" + date.toGMTString();  
        }
    },
    //获取某个cookie的值
    getCookie : function (key) {
        //先按照分号+空格切割cookie串
        var cookie = document.cookie;
        var cookieArr = cookie.split("; ");
        //遍历数组得到每一组cookie
        for (var tempCookie of cookieArr) {
            //每组cookie按照等号去切割
            var keyAndValueArr = tempCookie.split("=");
            if (keyAndValueArr[0] == key) {
                //需要解码
                return unescape(keyAndValueArr[1]);
            }
        }
    },
    // 立即删除某个cookie
    delCookie : function (key) {
        this.setCookie(key, "", -10);
    }
}

下面是对localstorage的应用

//可以通过点语法进行存储
window.localStorage.name = "小雪";
//中括号语法
window.localStorage["age"] = 18;

//以上两种方式不推荐写
//通过setItem方法来进行存储
window.localStorage.setItem("sex", "女");

//通过getItem方法进行获取
console.log(window.localStorage.getItem("name"));

//删除
window.localStorage.removeItem("sex");

//清空全部 (慎用)
window.localStorage.clear();

//看看是否可以存储一个对象
var person = {
    name : "小雪",
    age : 18,
    isMarry : false,
    friends : [
        {
            name : "小雨"
        },
        {
            name : "小红"
        }
    ],
    boyfriend : {
        name : "小黑"
    }
}

/*
 *  注意：localStorage存储对象或者数组等复杂结构，
 * 会把当前存储的数据类型转换成字符串，最后的值就是字符串
 * 例如会把对象转换成[object, object] ，把这个值存储进去
 * ，最后取出来也是字符串[oject, object]，对象的内部结构
 *  全部消失， 这不是我们想要的结果。
 */
window.localStorage.setItem("person", person);
window.localStorage.setItem("arr", ["a", [], {}]);

var personStr = window.localStorage.getItem("person");
var arrStr = window.localStorage.getItem("arr");

console.log(typeof personStr);
console.log(typeof arrStr);

/*
 * 我们可以通过序列化和反序列化操作来实现对
 * 复杂的数据结构进行存储，先把要存储的复杂结构，
 * 进行序列化操作（JSON.stringify()）转换成JSON串，
 * 存储起来后，将来获取，通过反序列化操作（JSON.parse()）
 * 进行转换成对象，方可使用。
 */
window.localStorage.setItem("person2", JSON.stringify(person));

var personObj = JSON.parse(window.localStorage.getItem("person2"));
console.log(personObj);

//通过length属性获取存储的个数
console.log(window.localStorage.length);

//通过遍历获取所有存储的信息
for (var i = 0; i < window.localStorage.length; i++) {
    console.log(window.localStorage.key(i) + "===" + window.localStorage.getItem(window.localStorage.key(i)));
}

推荐阅读更多精彩内容