美文网首页Web 前端开发 让前端飞
js数据存储1:cookie操作总结

js数据存储1:cookie操作总结

作者: 我不是大熊 | 来源:发表于2018-01-16 18:08 被阅读0次

        本文总结的是cookie的常见操作以及封装操作的方法,cookie原理,作用,和session的关系等等不予讨论,可以查看其它文章。
        cookie由以下几块组成:①名称:必需值;②值:必需值;③域domain:可选,如不填写,默认为设置cookie的域名;④路径path:可选,如不填写,默认为设置cookie的路径;⑤失效时间expires:可选,默认会话结束将cookie删除;⑥安全标志secure:可选,如果指定,则只能是SSL连接的时候才发送到服务器。
        cookie的限制:IE6 以及更低版本限制每个域名最多 20 个 cookie,IE7 和之后版本最多 50 个,Firefox 限制每个域最多 50 个 cookie, Opera 限制每个域最多 30 个 cookie,Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定,当超过单个域名限制之后还要再设置 cookie,浏览器就会清除以前设置的 cookie。而浏览器中对于 cookie 的尺寸限制是4096B(写的时候肯定要比这个容量低)。
        window.navigator.cookieEnabled:表示浏览器是否打开 Cookie 功能。
        HttpOnly属性:如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送。

原始的Cookie操作
    document.cookie = "myCookie=myValue";
    document.cookie = "cookie1=value1";
    //返回当前页面可用的cookie由分号隔开的key和value名值对:name1=value1;name2=value2;name3=value3
    console.log(document.cookie);
    //而且需要对名称和值进行编码(因为名称和值中不允许出现分号,逗号和空格)
    document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("jay") + ";domain=baidu.com;path=/";
    //一般设置cookie都是重新设置一个cookie,除非设置的时候,cookie名称,domain,path,secure这几个都一致,
    //如果想删除cookie就是这种做法.
封装Cookie常用操作
//封装常用cookie操作
    var CookieUtil = {
        get:function (name) {
            var cookieName = encodeURIComponent(name) + '=',cookieValue = null,
                cookieStart = document.cookie.indexOf(cookieName);
            if(cookieStart > -1){
                var cookieEnd = document.cookie.indexOf(';',cookieStart);
                if(cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
            }
            return cookieValue;
        },
        set:function (name, value,expires, path, domain,secure) {
            var cookieText = encodeURIComponent(name) + "=" +
                    encodeURIComponent(value);
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
            document.cookie = cookieText;
        },
        unset: function (name, path, domain, secure){
            this.set(name, "", new Date(0), path, domain, secure);
        }
    };
封装子Cookie操作

为了绕开浏览器对域名下的cookie数量的限制,可以使用子cookie的方式,同时要注意的是不能超过单个cookie的长度限制。

 //封装的关于子cookie的方法:
    var SubCookieUtil = {
        get:function (name, subName) {
            var subCookies = this.getAll(name);
            if(subCookies){
                return subCookies[subName];
            }else{
                return null;
            }
        },
        getAll:function (name) {
            var cookieName = encodeURIComponent(name) + "=",
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = null,
                cookieEnd,
                subCookies,
                i,
                parts,
                result = {};
            if(cookieStart > -1){
                cookieEnd = document.cookie.indexOf(";", cookieStart);
                if (cookieEnd == -1){
                    cookieEnd = document.cookie.length;
                }
                cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
                if(cookieValue.length > 0){
                    subCookies = cookieValue.split("&");
                    for (i=0, len=subCookies.length; i < len; i++){
                        parts = subCookies[i].split("=");
                        result[decodeURIComponent(parts[0])] =
                                decodeURIComponent(parts[1]);
                    }
                    return result;
                }
            }
            return null;
        },
        set: function (name, subName, value, expires, path, domain, secure) {
            var subcookies = this.getAll(name) || {};
            subcookies[subName] = value;

        },
        setAll: function(name, subcookies, expires, path, domain, secure) {
            var cookieText = encodeURIComponent(name) + "=",
                    subcookieParts = new Array(),
                    subName;
            for (subName in subcookies){
                if(subName.length > 0 && subcookies.hasOwnProperty(subName)){
                    subcookieParts.push(encodeURIComponent(subName) + "=" +
                            encodeURIComponent(subcookies[subName]));
                }
            }
            if (subcookieParts.length > 0){
                cookieText += subcookieParts.join("&");
                if (expires instanceof Date) {
                    cookieText += "; expires=" + expires.toGMTString();
                }
                if (path) {
                    cookieText += "; path=" + path;
                }
                if (domain) {
                    cookieText += "; domain=" + domain;
                }
                if (secure) {
                    cookieText += "; secure";
                }
            }else{
                cookieText += "; expires=" + (new Date(0)).toGMTString();
            }
            document.cookie = cookieText;
        },
        unset: function (name, subName, path, domain, secure){
            var subcookies = this.getAll(name);
            if (subcookies){
                delete subcookies[subName];
                this.setAll(name, subcookies, null, path, domain, secure);
            }
        },
        unsetAll: function(name, path, domain, secure){
            this.setAll(name, null, new Date(0), path, domain, secure);
        }
      };

相关文章

  • js数据存储1:cookie操作总结

    本文总结的是cookie的常见操作以及封装操作的方法,cookie原理,作用,和session的关系等等不予讨论,...

  • 数据存储之cookie(二)

    数据存储之cookie的属性及js对cookie的读取、写入和删除操作 上一篇介绍为cookie的原理及一些限制之...

  • js操作cookie

    JS操作cookie Jquery操作cookie 设置cookie 获取cookie 删除cookie 附件 j...

  • cookie 和 session 的区别以及用法

    1.cookie cookie 是存储在浏览器客户端的一小段数据,可以同时被前台与后台操作,cookie可以跨页面...

  • JavaScript Cookie

    cookie是存储在客户端的一些数据,可以使用JavaScript去操作这些数据。cookie以 名称=值 的形式...

  • PHP cookie

    cookie的特点 cookie是存储在浏览器客户端的一小断数据 cookie可以同时被前台后台操作,cookie...

  • 轻量级JS Cookie插件js-cookie的使用方法

    js-cookieGitHub地址js-cookie具体使用 js-cookie插件是一个JS操作cookie的插...

  • JS-数据存储-cookie

    用途:在客户端的磁盘上以很小的文件保存一定量的数据。 cookie的内容document.cookie='name...

  • promise使用

    promise使用 js的作用 存储 传输 展示 数据存储对比总结 例子1 例子2,把异步变同步

  • cookie的创建、读取和删除

    1, cookie的创建、读取和删除 在JS中,可以使用Document对象的cookie属性操作cookie。 ...

网友评论

    本文标题:js数据存储1:cookie操作总结

    本文链接:https://www.haomeiwen.com/subject/htzhoxtx.html