cookie 用法

最新推荐文章于 2023-03-20 14:15:22 发布
Zoe_Wang_ing
最新推荐文章于 2023-03-20 14:15:22 发布
阅读量512
点赞数
分类专栏： js 文章标签： cookie
js 专栏收录该内容
70 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js cookie应用</title>
</head>
<body>
  
  <div>
      <input type="button" value="提交" οnclick="setCookie(this.type,this.value,1)" />
      <input type="button" value="删除cookie" οnclick="setCookie(this.type,this.value,0)" />
      <input type="button" value="查看cookie" οnclick="getCookie()" />
  </div>

<script>
function $id(o){
  return document.getElementById(o) || o;
}

//js 创建cookie
//按照 name=value; max-age=seconds 方式设置cookie
//以名/值 的形式存储cookie
//同时采用encodeURIComponent()函数进行编程，来转义分号、逗号和空白符
//如果daysToLive是一个数字，设置max-age (单位默认为秒)属性为该数值表示cookie直到指定的天数
//到了才会过期，如果daysToLive 是0 就表示删除cookie

function setCookie(name, value, daysToLive){
  var cookie = name + '=' + encodeURIComponent(value);
  if(typeof daysToLive === 'number')
      cookie += '; max-age=' + (daysToLive*60*60*24);
  document.cookie = cookie;

  console.log(document.cookie);
}

//将document.cookie 的值以名/值 对组成的一个对象返回
//假设存储cookie的值的时候是采用encodeURIComponent()函数编码的
function getCookie(){
    var cookie = {};                      //初始化最后要返回的对象
    var all = document.cookie;            //在一个大写字符串中获取所有的cookie值
    if (all === '') return cookie;        //如果该cookie属性值为空字符串，返回一个空对象
    var list = all.split('; ');           //分离出名/值对
    for (var i = 0; i < list.length; i++) {   //遍历每个cookie
      var cookie = list[i];
      var p = cookie.indexOf('=');          //查找第一个"=" 符号
      var name = cookie.substring(0,p);     //获取cookie 的名字
      var value = cookie.substring(p+1);    //对其值进行解码
      value = decodeURIComponent(value);    //对其值进行解码
      cookie[name] = value;                 //将名/值对存储到对象中
    };
    //console.log(cookie);                  // 直接输出是最后一个键值对
    return cookie;        
}
// 每个cookie保存数据不超过4kb，每个web服务器保存cookie数不超过20个，现代浏览器允许cookie总数过300个，但部分浏览器对单个cookie大小仍4kb

/**
 * cookieStorage.js
 * 本类实现了
 * 注意：该例没有实现存储事件，当设置和查询cookieStorage对象的属性时，不会实现自动保存和获取对应的值
 */
function cookieStorage(maxage,path) {   // 两个参数分别代表存储有效期和作用域
    //获取一个存储全部cookie信息的对象
    var cookie = (function() {
        var cookie = {};    //该对象最终会返回
        var all = document.cookie;  //以大字符串的形式获取所有cookie信息
        if(all === '')        //如果该属性为空字符串
            return cookie;    //返回一个空对象
        var list = all.split('; ');     //分离出名/值对
        for (var i = 0; i < list.length; i++) {   //遍历每个cookie
          var cookie = list[i];
          var p = cookie.indexOf('=');      //查找第一个'=' 符号
          var name = cookie.substring(0,p);     //获取cookie 的名字
          var value = cookie.substring(p+1);    //对其值进行解码
          value = decodeURIComponent(value);    //对其值进行解码
          cookie[name] = value;                 //将名/值对存储到对象中
        };

        return cookie;        

    }());

    // 将所有cookie的名字存储到一个数组中
    var keys = [];
    for (var key in cookie) keys.push(key);

    //现在定义存储API 公共的属性和方法
    //存储的cookie的个数
    this.length = keys.length;

    //返回第n个cookie的名字，如果n越界则返回null
    this.key = function(n){
      if(n<0 || n> keys.length) return null;
      return keys[n];
    };

    //返回指定名字的cookie值，如果不存在返回null
    this.getItem = function(name){
      return cookie[name] || null;
    }

    //存储cookie值
    this.setItem = function(key,value){
      if(!(key in cookie)){     //如果要存储的cookie还不存在
        keys.push(key);         //将指定的名字加入到存储所有cookie名的数组中
        this.length++;          //cookie个数加1
      }

      //将该名/值对数据存储到cookie对象中
      cookie[key] = value;

      //开始正式设置cookie
      //首先将要存储的cookie的值进行编码，同时创建一个"名字=编码后的值"形式的字符串
      var cookie = key + '=' + encodeURIComponent(value);

      //将cookie的属性也加入到该字符串中
      if(maxage) cookie += '; max-age=' + maxage;
      if(path) cookie += '; path=' + path;

      //通过document.cookie属性来设置cookie
      document.cookie = cookie;

    };

    this.removeItem = function(key) {
      if (!(key in cookie)) return;   //如果cookie不存在，则什么也不做

      //从内部维护的cookie组删除指定的cookie
      delete cookie[key];

      // 同时将cookie中的名字也在内部的数组中删除
      // 如果使用ES5定义的数组 indexOf()方法会更加简单
      for (var i = 0; i < keys.length; i++) {     //遍历所有的名字
        if(keys[i] === key){                      //当我们找到了要找的那个
          keys.splice(i,1);                       //将它从数组中删除
          break;
        }
      }
      this.length--;                              //cookie个数减一

      //最终通过该cookie的值设置为空的字符串以及将有效期设置为0 来删除指定的cookie
      document.cookie = key + '=; max-age=0';
    };

    //删除所有的cookie
    this.clear = function() {
      //循环所有的cookie名字，并将cookie删除
      for (var i = 0; i < keys.length; i++) 
        document.cookie = keys[i] + '=; max-age=0';
      //重置所有的内部状态
      cookie = {};
      keys = [];
      this.length = 0;
    };

}

</script>

</body>
来自javascript 权威指南第六版