具体代码如下,cookie是浏览器提供的一种机制

作者: 前端  发布:2019-08-28

JavaScript设置、获取、清除单值和多值cookie的方法,javascriptcookie

废话不多说了,直接给大家贴代码了。

具体代码如下:

var CookieUtil = (function () {
   var Cookie = function () {
     // 获取单值cookie
     this.get = function(name) {
       var start = document.cookie.indexOf(encodeURIComponent(name)) ;
       var end = document.cookie.indexOf(';', start) ;
       if(end == -) {
         end = document.cookie.length;
       }
       return decodeURIComponent(document.cookie.substring(start name.length ,end));
     };
     // 设置单值cookie
     this.set = function(name, value, expires, path, domain, secure) {
       var cookieText = encodeURIComponent(name)   "="   encodeURIComponent(value);
       // 设置默认过期时间为七天
       if(expires == undefined) {
         var date = new Date();
         date.setTime(date.getTime()   ****);
         expires = date ;
       }
       if(expires instanceof Date) {
         cookieText  = "; expires="   expires.toGMTString();
       }
       if(path != undefined) {
         cookieText  = "; path="   path;
       }
       if(domain != undefined) {
         cookieText  = "; domain"   domain;
       }
       if(secure != undefined) {
         cookieText  = "; secure";
       }
       document.cookie = cookieText;
     };
     // 清除单值cookie
     this.unset = function(name, path, domain, secure) {
       this.set(name, '', new Date(), path, domain, secure );
     };
     // 设置多值cookie
     this.setAll = function(name, subCookies, expires, path, domain, secure) {
       var cookieText = ";"   encodeURIComponent(name)   "=",
       arr = new Array();
       for(var attr in subCookies) {
         arr.push([encodeURIComponent(attr)]   ":"   encodeURIComponent(subCookies[attr]));
       } 
       this.set(name, arr.join('&'), expires, path, domain, secure);
     };
     // 获取多值cookie
     this.getAll = function(name) {
       var obj = {};
       var arr = this.get(name).split('&');
       for(var i = , len = arr.length; i < len; i  ) {
         var tmpArr = arr[i].split(':');
         obj[decodeURIComponent(tmpArr[])] = decodeURIComponent(tmpArr[]);
       }
       return obj;
     };
     // 获取多值cookie的子cookie
     this.getSub = function(name, subname) {
       var obj = this.getAll(name);
       return obj[subname];
     };
     // 清除指定的多值cookie
     this.unsetAll = function(name,path,domain,secure) {
       this.unset(name, '', new Date(), path, domain, secure);
     };
     // 清除指定多值cookie的子cookie
     this.unsetSub = function(name, subname,path, domain, secure) {
       var obj = this.getAll(name);
       delete obj[subname];
       this.setAll(name, obj, null, path, domain, secure);
     };
   };
   return new Cookie();
 })();

 以上代码就是本文给大家介绍JavaScript设置、获取、清除单值和多值cookie的方法,有哪里不清楚的地方欢迎给我留言。

9159.com, 废话不多说了,直接给大家贴代码了。 具体代码如下: var CookieUtil = (func...

废话不多说了,直接给大家贴代码了。

复制代码 代码如下:

cookie

首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cookie并不是JavaScript本身的属性,cookie是储存于用户硬盘的一个文件(测试的时候在FF测试,其他浏览器不支持直接输出cookie)

  1. cookie的作用

    1. 由于http协议本身是一个无状态的通信协议,所以我们需要把一些信息通过cookie一起进行传递,保证服务器能识别,可以理解为cookie是用来增强http协议的部分不足之处
    2. 由于cookie是存储于用户的硬盘上的,所以可以作为一个全局变量来使用,这是它最大的一个优点,可以根据这个特性来操作如:保存用户登录状态,跟踪用户行为,创建购物车等
  2. 使用cookie需要注意的是

    1. cookie具有不可跨域性,不同域名下的cookie是不可以相互获取的
    2. cookie有大小的限制,大概为4kb,也就是4096字节
    3. cookie需要设定过期时间,如果不设定的情况下默认关闭浏览器后清除
    4. 浏览器本身会限制每个站点的cookie的数量,大概为20个cookie
    5. cookie不建议放置太多内容,因为每次都会随着请求头一起发送,会影响性能,同时cookie在电脑上是可查看的,所以重要的信息不建议放置在cookie上
  3. 接下来是重点了,那么我们如何获取cookie呢?在js中为我们提供了这么一种方法 doucmnet.cookie,返回的是一个字符串,我们来举个例子

    <script>
    document.cookie="userName=user"
    document.cookie="userName=xiaoming"
    console.log(document.cookie)//userName=xiaoming; suerNmae=xiaoming
    </script>
    

    这就是创建了一个cookie,userName代表cookie的名称,user代表cookie的值,如果cookie的名称不存在那么代表重新创建cookie,如果已经存在,代表为cookie重新赋值

  4. 接下来我们开始说一下如何设置和获取以及删除cookie

    1. 设置cookie,直接上代码

      <script>
      function setCookie(name,value,expDays){   //name 名字  value 值 expDays 过期时间
            //首先设置expDays为当前时间 
        var expDate=new Date;
        //使用setDate的方法为当前时间加上expDays设置cookie的失效时间
          expDate.setDate(expDate.getDate() expDays);
        //设置cookie的内容时不能出现空格方,分号等特殊字符,使用escape对内容进行编码
        //通过toUTCString方法把日期转换为字符串传入
          document.cookie=name '=' escape(value) ';expires' expDate.toUTCString();
      }
      </script>
      
    2. 获取cookie,直接上代码

      <script>
      function getCookie(name){
        //设置初始位置,检查cookie中有没有这个name
          var start=document.cookie.indexOf(name "=");
      
          if(start !=-1){
            //如果有的话把strat的位置变为由'='开始的位置
              start=start name.length 1;
            //设置cookie截取到的终点位置,到下一个";"为止
              var end=document.cookie.indexOf(";",start);
            //这里是为了判断如果这个name是cookie的最后一个值的话那么它的value是没有";"的,直接到          cookie的结尾位置即可
              if(end==-1) end=document.cookie.length;
            //将cookie的value的值解码返回
              return unescape(document.cookie.substring(start,end))
          }
        //如果该cookie不存在的话直接返回空的字符串
          return ""
      }
      </script>
      
    3. 删除cookie,这里需要说一下,cookie的删除是由浏览器执行的,在浏览器发现cookie的有效日期已经过期的话会对该条cookie进行删除操作,下面开始代码

      <script>
      //直接回调setCookie的方法,然后将cookie的有效时间向前一天
      function removeCookie(name){
          setCookie(name,"",-1)
      }
      </script>
      

具体代码如下:

function getCookie(name)
    {   
        var offset,cookieValue;
        var search=name "=";
        if(document.cookie.length>0)
        {
            offset=document.cookie.indexOf(search);
            if(offset!=-1)
            {
                offset = search.length;  
                end = document.cookie.indexOf(";", offset);  
                if (end == -1)
                    end = document.cookie.length;  
                cookieValue=unescape(document.cookie.substring(offset, end));
            }
        }
        return cookieValue;
    }
//name表示cookie的键的名字

localStorage,sessionStorage

那么我接下说一下关于localStorage(本地存储)和sessionStorage(会话存储)这两个都是在HTML5中新增加的属性,它们将浏览器的本地存储的大小扩大到了5M,而且从IE8以上的浏览器都开始支持,localStorage指的是将数据存储在浏览器本地,如果不进行清除那么数据会一直存在,sessionStorage表示的是会话存储,如果浏览器关闭那么数据将会被清除,注意传入的必须是字符串格式的,如果想要写入的时候更复杂JSON.parse(localStorage.getItem("a")),那么相应的导出的时候使用localStorage.setItem("a", JSON.stringify(obj))

在HTML5中,本地存储是一个window的方法,所以检测的代码如下:

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

这两者的方法,由于用法比较简单,所以直接上代码

<script>
window.localStorage.name="xiaoming";//设置name
window.localStorage["name"]="xiaobai";//设置name,注意需要是字符串格式的
localStorage.setItem("name","xiaohong");//设置name
console.log(localStorage.name);//最后设置的值覆盖了之前设置的值
console.log(localStorage["name"]);//也是获取localStorage的值,不过记的要传入的是字符串
// localStorage.removeItem("name");//删除指定的localStorage的属性值
localStorage.clear();//清除所有localStarge的属性和值
console.log(localStorage.getItem("name"));//获取特定的localStorage的值,返回的是null
console.log(window.localStorage.name);//undefined
//推荐使用的方法,setItem,getItem,removeItem,clear
</script>

在H5中提供了一个key()方法,用来在不知道键和值得情况下获取所有的键和值,使用方法如下:

<script>
var stroage=window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i  ){
  //key(i)获得相应的键,再用getItem()方法获得对应的值
  document.write(storage.key(i)  " : "   storage.getItem(storage.key(i))   "<br>");
    }
}
</script>

在H5中新增加了onstorage事件,当本地存储发生改变时,会触发该事件

StorageEvent对象的属性:

  • key:表示项目的key发生了变化;该属性返回其初始化的值,创建对象后,该值被初始化为null。
  • oldValue:表示变更前的值
  • newValue:变更后的值
  • url:事件触发源的URL
  • source:事件触发源的URL
  • storageArea:受到影响的storage对象

来一段代码

<script>
window.onstorage = function (event) {
    var key = event.key // 被修改的键名
    var oldValue = event.oldValue // 旧的值
    var newValue = event.newValue // 新的值
    var url = event.url // 触发改变的网页的url
    var storage = event.storageArea // 当前localStorage的引用(当sessionStorage改变时,这里就是当前sessionStorage的引用,好吧扯远了,看不懂可以先无视)
}
</script>

if (!window.localStorage) {
    Object.defineProperty(window, "localStorage", new (function () {
        var aKeys = [], oStorage = {};
        Object.defineProperty(oStorage, "getItem", {
            value: function (sKey) { return sKey ? this[sKey] : null; },
            writable: false,
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(oStorage, "key", {
            value: function (nKeyId) { return aKeys[nKeyId]; },
            writable: false,
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(oStorage, "setItem", {
            value: function (sKey, sValue) {
                if(!sKey) { return; }
                document.cookie = escape(sKey)   "="   escape(sValue)   "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
            },
            writable: false,
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(oStorage, "length", {
            get: function () { return aKeys.length; },
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(oStorage, "removeItem", {
            value: function (sKey) {
                if(!sKey) { return; }
                document.cookie = escape(sKey)   "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
            },
            writable: false,
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(oStorage, "clear", {
            value: function () {
                if(!aKeys.length) { return; }
                for (var sKey in aKeys) {
                    document.cookie = escape(sKey)   "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                }
            },
            writable: false,
            configurable: false,
            enumerable: false
        });
        this.get = function () {
            var iThisIndx;
            for (var sKey in oStorage) {
                iThisIndx = aKeys.indexOf(sKey);
                if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
                else { aKeys.splice(iThisIndx, 1); }
                delete oStorage[sKey];
            }
            for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
            for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/s*;s*/); nIdx < aCouples.length; nIdx  ) {
                aCouple = aCouples[nIdx].split(/s*=s*/);
                if (aCouple.length > 1) {
                    oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
                    aKeys.push(iKey);
                }
            }
            return oStorage;
        };
        this.configurable = false;
        this.enumerable = true;
    })());
}
var CookieUtil = (function () {
   var Cookie = function () {
     // 获取单值cookie
     this.get = function(name) {
       var start = document.cookie.indexOf(encodeURIComponent(name)) ;
       var end = document.cookie.indexOf(';', start) ;
       if(end == -) {
         end = document.cookie.length;
       }
       return decodeURIComponent(document.cookie.substring(start name.length ,end));
     };
     // 设置单值cookie
     this.set = function(name, value, expires, path, domain, secure) {
       var cookieText = encodeURIComponent(name)   "="   encodeURIComponent(value);
       // 设置默认过期时间为七天
       if(expires == undefined) {
         var date = new Date();
         date.setTime(date.getTime()   ****);
         expires = date ;
       }
       if(expires instanceof Date) {
         cookieText  = "; expires="   expires.toGMTString();
       }
       if(path != undefined) {
         cookieText  = "; path="   path;
       }
       if(domain != undefined) {
         cookieText  = "; domain"   domain;
       }
       if(secure != undefined) {
         cookieText  = "; secure";
       }
       document.cookie = cookieText;
     };
     // 清除单值cookie
     this.unset = function(name, path, domain, secure) {
       this.set(name, '', new Date(), path, domain, secure );
     };
     // 设置多值cookie
     this.setAll = function(name, subCookies, expires, path, domain, secure) {
       var cookieText = ";"   encodeURIComponent(name)   "=",
       arr = new Array();
       for(var attr in subCookies) {
         arr.push([encodeURIComponent(attr)]   ":"   encodeURIComponent(subCookies[attr]));
       } 
       this.set(name, arr.join('&'), expires, path, domain, secure);
     };
     // 获取多值cookie
     this.getAll = function(name) {
       var obj = {};
       var arr = this.get(name).split('&');
       for(var i = , len = arr.length; i < len; i  ) {
         var tmpArr = arr[i].split(':');
         obj[decodeURIComponent(tmpArr[])] = decodeURIComponent(tmpArr[]);
       }
       return obj;
     };
     // 获取多值cookie的子cookie
     this.getSub = function(name, subname) {
       var obj = this.getAll(name);
       return obj[subname];
     };
     // 清除指定的多值cookie
     this.unsetAll = function(name,path,domain,secure) {
       this.unset(name, '', new Date(), path, domain, secure);
     };
     // 清除指定多值cookie的子cookie
     this.unsetSub = function(name, subname,path, domain, secure) {
       var obj = this.getAll(name);
       delete obj[subname];
       this.setAll(name, obj, null, path, domain, secure);
     };
   };
   return new Cookie();
 })();

您可能感兴趣的文章:

  • javascript js cookie的存储,获取和删除
  • JS获取dom 对象 ajax操作 读写cookie函数
  • ASP.NET获取不到JS设置cookies的解决方法
  • JS设置获取cookies的方法
  • js获取指定的cookie的具体实现
  • JavaScript设置、获取、清除单值和多值cookie的方法

 以上代码就是本文给大家介绍JavaScript设置、获取、清除单值和多值cookie的方法,有哪里不清楚的地方欢迎给我留言。

您可能感兴趣的文章:

  • javascript js cookie的存储,获取和删除
  • JS获取dom 对象 ajax操作 读写cookie函数
  • ASP.NET获取不到JS设置cookies的解决方法
  • JS获取后台Cookies值的小例子
  • JS设置获取cookies的方法
  • js获取指定的cookie的具体实现

本文由9159.com发布于前端,转载请注明出处:具体代码如下,cookie是浏览器提供的一种机制

关键词: 9159.com