前端存储的介绍和对比

前端开发的时候，因为功能需求，有些数据需要持久化的存储。这就涉及到了前端的数据存储。接下来我介绍一下自己用过的两种前端存储方式，对他们的使用方式也做一下简单的归纳。

cookie的使用

cookie是浏览器本地存储的一小段文本信息。文本长度限制大约是4k。也是大部分人常用的前端存储方式。每次前端请求服务端时，都会在request请求上带上cookie,将其传至服务端。

cookie以下面的形式存在：
document.cookie="cookieName=cookieValue;expires='Sat, 11 Nov 2017 07:20:22 GMT';path='/'";

1. cookieName：该cookie的名称，cookieValue：该cookie的值。
2. expires：cookie的过期时间。是一个具体的时间点，到了该时间后，系统会自动回收cookie。如果不写，系统默认浏览器关闭时回收。
3. path：cookie有效的作用域，在该目录下cookie有效。如果不写，默认当前网站根目录有效。

在前端我们可以用js对cookie进行增删改的操作，下面是我封装的使用cookie的方法：

var CookieUtil = {

    /**
     * 设置cookie
     * @param name   cookie的名称
     * @param value  cookie的值
     * @param time   cookie过多长时间过期，单位是毫秒
     * @param path   cookie的有效区域，根目录是"/"或者不传参
     */
    setCookie : function(name, value, time, path) {
        var cookieStr = "";
        /**
         * 字符需要进行URI编码，防止一些特殊的字符影响传输。
         * 取值得时候要响应的解码
         */
        cookieStr += (name + "=" + encodeURIComponent(value) + ";");
        if (time) {
            var outDate = new Date();
            outDate.setTime(new Date().getTime()+time);
            /**
             * 时间需要转换成GMT格式时间
             */
            cookieStr += ("expires = " + outDate.toUTCString() + ";");
        }
        if (path) {
            cookieStr += ("path = " + path + ";")
        }
        document.cookie = cookieStr;
    },

    /**
     * 获取cookie的值
     * @param name   cookie的名称
     * @returns {*}  返回cookie的值
     */
    getCookie : function(name) {
        var cookieStr = document.cookie;
        var cookiePairs = cookieStr.split(";");
        for (var i = 0; i < cookiePairs.length; i++) {
            var index;
            if ( index = cookiePairs[i].indexOf(name) >= 0) {
                var cookieValue = cookiePairs[i].substring(index + name.length + 1)
                /**
                 * 结果需要URI解码，存储的时候根据URL进行过编码
                 */
                return decodeURIComponent(cookieValue);
            }
        }
        return null;
    },

    /**
     * 删除cookie，重新设置cookie过期时间为过去时间，系统自动删除
     * @param name  cookie的名称
     */
    deleteCookie : function(name) {
        this.setCookie(name, null, -1, null);
    }
};

locaStorage 和 sessionStorage的使用

locaStorage 和 sessionStorage都是h5提供的浏览器本地存储数据的方式。

localStorage：数据在当前页面所属的整个站点都有效。存储时长没有限制，除非主动删除数据才会消失（调用removeItem, clear API，或者清除浏览器缓存数据等）。

sessionStorage：数据只在当前session有效。即只当前浏览器的tab页内有效。随着浏览器的关闭数据消失。

对比cookie，它们具有如下特点：

1. 存储量大，每一个站点提供至少5M的存储。
2. 数据不会跟随http请求发送到server端。

由于是h5提供的存储方式，使用该特性对于浏览器版本有要求，支持该存储的浏览器版本如下：

1. Chrome : 4.0
2. IE : 8.0
3. Firefox : 3.5
4. Safari : 4.0
5. Opera : 11.5

判断浏览器是否支持该特性可以通过一下方式：

if (typeof(window.sessionStorage) != undefined) {
        console.log("浏览器支持sessionStorage");
}

localStorage和sessionStorage提供的API相同并且非常简单：

1. 增加数据，原来有数据会被覆盖：setItem(key, value);
2. 获取数据：getItem(key);
3. 删除指定数据：removeItem(key);
4. 删除全部数据：clear();

要注意的是，两者存储的都是文本信息，如果是js对象，可以使用JSON.stringify()转为字符串。取值的时候使用JSON.parse()将字符串转为js对象。

以下是sessionStorage使用示例代码：

/**
 * 通过以下方式判断浏览器是否支持storage
 */
if (typeof(window.sessionStorage) != undefined) {
    console.log("浏览器支持sessionStorage");

    var person = {
        name: "markfengfeng",
        sex: "男"
    };

    /**
     * 存储数据，指定key和value。js对象需要转为字符串
     */
    window.sessionStorage.setItem("person", JSON.stringify(person));

    /**
     * 获取数据
     */
    var storagePerson = JSON.parse(window.sessionStorage.getItem("person"));

    /**
     * 根据key移除指定的数据
     */
    window.sessionStorage.removeItem("person");

    /**
     * 删除所有数据
     */
    window.sessionStorage.clear();

}