cookie

作者: wade3po | 来源:发表于2019-02-10 20:14 被阅读2次

    Cookie是客户端存在本地的一个数据,简单来说就是本地缓存。

    Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘汰。

    由于浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销,于是cookie成为了记录用户信息的专属,Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

    Cookie有两个方式注入,一个是服务端直接写入,另外一个是JavaScript创建。JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

    document.cookie通过分号;接收三个参数:

    document.cookie="key=value; expires=time; path=/";

    key和value就是要存储的键值对;

    expires是存储时间,UTC和GMT时间都可以,如果没有这个值默认浏览器关闭就删除cookie;

    path是路径,默认情况下是当前页面,如果你要某个子页面不希望其他子页面能获取就要设置这个path;

    我们封装一个设置、删除、获取的方法:

        var cookie = {
            set: function (key, val, time) {
                //设置cookie方法
                var date = new Date();
                var expiresDays = time;
                date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);
                document.cookie = key + "=" + val + ";expires=" + date.toGMTString();
            }, 
            get: function (key) {
                var getCookie = document.cookie.replace(/[ ]/g, "");
                var arrCookie = getCookie.split(";")
                var res;
                for (var i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (key == arr[0]) {
                        res = arr[1];
                        break;
                    }
                }
                return res;
            }, 
            remove: function (key) {
                var date = new Date();
                var expiresDays = date.setTime(date.getTime());
                document.cookie = key + "=;expires=" + date.toGMTString();
            }
        };
    

    其实删除就是给设置一个过期时间。因为document.cookie获取到的cookie中间有空格,所以要正则去空格。

    Cookie在JavaScript的操作很简单,不过我们要注意,不要随便设置cookie,因为cookie会被携带上发送到服务端,影响性能。所以客户端最好不要设置cookie,如果有需要的话让服务端自己注入cookie。

    已更新到:https://www.npmjs.com/package/wade-tools

    欢迎关注Coding个人笔记 公众号

    相关文章

      网友评论

          本文标题:cookie

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