cookie与localstorage(本地存储)和sessionStorage

什么是cookie?

1.cookie是一种会话跟踪技术
2. 会话：用户进入网站 开始浏览信息到用户关闭浏览器的过程被称 之为一次会话
3. 会话跟踪技术：浏览器（客户端） 和 服务器 之间在进行多次请 求数据时，数据共享的过程 就称为会话跟踪技术

为什么要有cookie?

Http协议是无状态的，服务器不知道用户上次做了什么，这严重的阻碍了交互式web应用程序的实现

cookie的存和取

document.cookie = “key = value”; //存
document.cookie; //取

JSON对象的转换

1.json.stringify();

JavaScript 值转换为 JSON 字符串

语法:

JSON.stringify(value[, replacer[, space]])

2.json.parse();

将数据转换为 JavaScript 对象。

语法:

JSON.parse(text[, reviver])

JSON方法存在兼容问题

JSON.parse和JSON.stringify这两个方法在ie8及以上浏览器都能够使用，但关于兼容低版本的浏览器，可以用两种方法解决。
1.可以引入json2.js

<!--[if lt IE 8]> <script src="https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js"></script> <![endif]-->

if (!window.JSON) {
    window.JSON = {
        parse: function(jsonStr) {
            return eval('(' + jsonStr + ')');
        },
        stringify: function(jsonObj) {
            var result = '',
                curVal;
            if (jsonObj === null) {
                return String(jsonObj);
            }
            switch (typeof jsonObj) {
                case 'number':
                case 'boolean':
                    return String(jsonObj);
                case 'string':
                    return '"' + jsonObj + '"';
                case 'undefined':
                case 'function':
                    return undefined;
            }

            switch (Object.prototype.toString.call(jsonObj)) {
                case '[object Array]':
                    result += '[';
                    for (var i = 0, len = jsonObj.length; i < len; i++) {
                        curVal = JSON.stringify(jsonObj[i]);
                        result += (curVal === undefined ? null : curVal) + ",";
                    }
                    if (result !== '[') {
                        result = result.slice(0, -1);
                    }
                    result += ']';
                    return result;
                case '[object Date]':
                    return '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"';
                case '[object RegExp]':
                    return "{}";
                case '[object Object]':
                    result += '{';
                    for (i in jsonObj) {
                        if (jsonObj.hasOwnProperty(i)) {
                            curVal = JSON.stringify(jsonObj[i]);
                            if (curVal !== undefined) {
                                result += '"' + i + '":' +curVal + ',';
                            }
                        }
                    }
                    if (result !== '{') {
                        result = result.slice(0, -1);
                    }
                    result += '}';
                    return result;

                case '[object String]':
                    return '"' + jsonObj.toString() + '"';
                case '[object Number]':
                case '[object Boolean]':
                    return jsonObj.toString();
            }
        }
    };
}

cookie的封装

(function() {
    var cookie = {
        get: function(key) { if (document.cookie) { var str = document.cookie; var arr = str.split("; "); for (var i = 0; i < arr.length; i++) { var item = arr[i].split("="); if (item[0] == key) { return item[1] } } } return "" },
        set: function(key, val, day) {
            console.log(key, val, day);
            if (day) {
                var d = new Date();
                d.setDate(d.getDate() + day);
                document.cookie = key + "=" + val + ";expires=" + d + ";path=/"
            } else { document.cookie = key + "=" + val + ";path=/" }
        },
        remove: function(key) { this.set(key, "", -1) }
    };
    window.cookie = cookie
})();

localstorage

一、什么是localStorage、sessionStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限
localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

三、localStorage与sessionStorage的唯一一点区别：

localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

三者的异同