17-06-js_storage

每日攻克一个知识点

• cookie和web存储(localStorage,sessionStorage)相同点和不同点
• cookie
• localStorage

cookie和web存储相同点和不同点

1.都会在浏览器端保存，有大小限制，同源限制(不同站点无法相互访问读取对方存储的数据)
2.cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；webstorage不会发送到服务器
3.cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
4.有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
5.共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
6.localStorage的修改会促发其他文档窗口的update事件
7.cookie有secure属性要求HTTPS传输
8.浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage支持大容量

cookie

/*cookieStorage1.0
 *设置cookie
    cookieStorage.setCookie(key,value,time,path);参数：key,值，有效时间(单位秒)，作用域；参数顺序不能变
 *获取cookie
    cookieStorage.getCookie(key)
 *获取cookie条数
     cookieStorage.length
 *获取key值
    cookieStorage.key(n)
 *删除某一个cookie
    cookieStorage.removeCookie(key)
 *全部删除
     cookieStorage.clear()
 */
 (function (cookieStorage) {
    //创建一个存储全部cookie信息的对象及容器
    var cookie = (function () {
        var cookie = {};
        var all = document.cookie;
        if (all === '') return cookie;
        var list = all.split('; ');//分离每一条cookie信息
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            var icon = item.indexOf('=');
            var name = item.substring(0, icon);
            var value = item.substring(icon + 1);
            cookie[name] = value;
        };
        return cookie;
    }());
    //key容器
    var keys = [];

    for (var key in cookie) {
        keys.push(key);
    };

    //length属性
    cookieStorage.length = keys.length;

    //获取特定key值的方法
    cookieStorage.key = function (n) {
        if (n < 0 || n >= cookieStorage.length) return null;
        return keys[n];
    };

    //获取指定cookie的值
    cookieStorage.getCookie = function (name) {
        return cookie[name] || null;
    }

    //设置cookie值
    cookieStorage.setCookie = function (key, value, time, path) {
        if (!(key in cookie)) {
            keys.push(key);
            cookieStorage.length++;
        }
        cookie[key] = value;

        var cookieValue = key + '=' + value;
        if (time) cookieValue += '; max-age=' + time;
        if (path) cookieValue += '; path=' + path;
        document.cookie = cookieValue;
    };

    //删除指定cookie
    cookieStorage.removeCookie = function (key) {
        if(!(key in cookie)) return;
        delete cookie[key];//删除对象中的key值的value;

        for (var i = 0; i < keys.length; i++) {
            if(keys[i] === key) {
                keys.splice(i, 1);
                break;
            };
        };//删除keys中的key值
        cookieStorage.length--;

        document.cookie = key + '=;max-age=0';//把cookie中的key值设为空；有效期设为0；删除cookie中的值
    };

    //删除所有cookie
    cookieStorage.clear = function () {
        for (var i = 0; i < keys.length; i++) {
            document.cookie = key[i] + '=;max-age=0';
        }
        cookie = {};
        keys = [];
        cookieStorage.length = 0;
    };

    window.cookieStorage = cookieStorage;
})(window.cookieStorage || {})

localStorage

/*localStorage设置*/
localStorage.setItem(key,value);

/*localStorage获取*/
localStorage.getItem(key);

/*localStorage删除*/
localStorage.removeItem(key);

/*localStorage全部删除*/
localStorage.clear();