喜迎
春节

JS-cookie


一个网站从打开到浏览(包括这个网站的其他子页面)到最后关闭浏览器整个过程叫一个“会话”。
在一次会话从开始到结束的整个过程,全程跟踪记录客户端的状态(例如:是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等)。

多次请求页面,数据共享
cookie.png

cookie的存取

document.cookie = "username=zhangsan"; //存 cookie
console.log(document.cookie); // 取 cookie

cookie的修改与删除

修改:再次写一个同名cookie,即可覆盖修改了
删除:将expires值比如取为-1,时效写为以前的日期

// 存cookie 
function setCookie() { 
    tools.cookie("user", "张三", {path: "/"});
}

// 取cookie
function getCookie () {
    var user = tools.cookie("user");
    console.log(user);
}

// 删除cookie
function deleteCookie () {
    // 把cookie的过期时间设置为以前的日期
    tools.cookie("user", "", {expires: -1, path: "/"});
}

而使用cookie技术的目的就是:解决HTTP无状态的问题

  • 注意:cookie是http/https协议下的技术,不支持本地file文件对cookie操作(但是貌似火狐浏览器是个例外)
  • HTTP(无状态的协议),基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信

cookie的时效: expires

var d = new Date();
d.setDate(d.getDate() + 2); //例如设置到过期的日期为2天后
document.cookie = "username=zhangsan;expires="+d;

cookie的路径:path

document.cookie = "name=zhangsan;path=/"; //将存的cookie设置存储在/根路径下,确保该网站下的每个页面都可以取这个cookie
}

cookie的特点

1.只能使用文本,不能中文,不能存对象
2 单条存储有大小限制 4KB
3 数量限制(一般浏览器,限制大概在50条左右)
4 读取有域名限制 不可跨域读取,只能由来自 写入cookie的 同一域名 的网页可进行读取。
5 时效限制 每个cookie都有时效,最短的有效期是,会话级别:就是当浏览器关闭,那么cookie立即销毁

encodeURIComponent和decodeURIComponent方法

  • 因为cookie的特点不能使用中文,所以存的时候若有中文要重新编码
  1. encodeURIComponent用于编码,可将中文转化为其他字符,例如encodeURIComponent(‘张三’),结果为”%E5%BC%A0%E4%B8%89”

  2. decodeURIComponent反之用于解码
    decodeURIComponent(“%E5%BC%A0%E4%B8%89”); // 张三

var username = "张三";
username = encodeURIComponent(username);
document.cookie = "username="+username;
console.log(document.cookie);

若非要存取一个对象类型的cookie

  • 前面说了,cookie的特点为只能存取文本,若非要存取一个对象类型的cookie,则要进行转换
    ```javascript
    var obj = {
    “name”:”zhangsan”,
    “age”: 18
    };
    // 存cookie
    tools.cookie(“cart”, JSON.stringify(obj), {”path”: “/“, “expires”: 5});

// 取cookie
var obj2 = JSON.parse(tools.cookie(“cart”));
console.log(obj2);


### 封装一个存取cookie的函数(记忆,面试可能会问到)
```javascript
var tools = {
/* cookie的操作(存取)
 * @param key   string  存取的key值
 * @param [value] string  如果传入value,那么就是 存cookie; 不传就是 取cookie; 就可以根据是否有value值来判断是存 或者 取 cookie,然后进行相应的操作
 * @paran [option] object  {expires, path}
 * @return  string 取cookie的时候返回的当前cookie的值
 */
cookie : function (key, value, option) {
  if(value === undefined){
    // 1.取cookie
    var cookie = document.cookie;
    var arr = cookie.split("; "); // 因为cookie格式为key和value中间以=连接
    var obj = {};
    arr.forEach(function(ele){
        var subarr = ele.split("=");
        obj[subarr[0]] = decodeURIComponent(subarr[1]);
    })
    // 判断obj对象里面有没有这个key
    return obj[key] ? obj[key] : "";
  }
  else{
    //2.存cookie
    var str = key+"="+encodeURIComponent(value);
    if(option){
        // path
        if(option.path){
            str += ";path="+option.path;
        }
        // expires
        if(option.expires) {
            var date = new Date();
            // 把过期日期设置为option.expires天之后
            date.setDate(date.getDate() + option.expires);
            str += ";expires=" + date;
        }
    }
    document.cookie = str;
  }
}
}

// 以后就可以引用这个写好的方法
// 例如:
//存cookie
// tools.cookie("name", "张三", {"path": "/", "expires": 5}); 

//取cookie 
// console.log(tools.cookie("name"));

文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
chrome调试
chrome调试
1.console.table();将数组打开展示。 2.console.time()代码运行时间,console.timeEnd()放在结尾 3.monitorEvents();事件执行顺序。
2020-08-15
下一篇 
JS-模块化
JS-模块化
函数封装 —-> 对象 —-> 立即执行函数 —-> 模块化规范 是一种项目的构架模式, 这种构架模式让JS代码重用性变得非常高,让项目构架的一些复杂问题全部得以解决。 例如,多个script标签不会再出现了,我们只要用一
2020-08-13
  目录