前端存储的介绍和对比

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

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();}