欢迎光临
我们一直在努力

JavaScript | cookie获取设置与删除

文章目录

前端共有以下几种本地存储方式

  • cookie
  • localStorage
  • sessionStorage
  • webSQL/indexDB

cookie

HTTP协议

  • http:超文本传输协议
  • https:超文本传输安全协议

http协议的一个特点是无状态,同一个客户端的这次请求和上次请求没有对应关系,对http服务器来说,他并不知道这两个请求来自同一个客户端。为了解决这个问题,web程序引入了cookie。

cookie就是存储在客户端的一小段文本,大小不能超过4kb,在请求接口的时候,cookie会被请求者携带,进而被服务器所读取使用。

主要属性:

  • name:cookie的名称
  • value:cookie的值,大小最大4kb
  • domain:cookie存储的域名
  • path:cookie存储的路径
  • size:cookie的大小
  • expires/max-age:cookie的存活时间

Max-Age 属性制定了从现在开始 cookie 存在的秒数,比如 60 * 60 (即一小时)。过了这个时间以后,浏览器就不再保留这个 Cookie。

Max-Age的优先级比Expires高,如果两者都不设置,则这个cookie会在浏览器关闭的时候失效。

  • httponly:如果设置了该属性,意思就是这个cookie不能被JavaScript取到,也就防止了cookie被脚本读取,然后当发起请求的时候,该cookie才会被带上。
  • secure:指定浏览器只有在加密协议 HTTPS 下才能发送cookie,不需要设置,当协议是https时,会自动开启。

设置cookie

//cookie设置方法
function setCookies(options) {
if (!options.key || !options.val) {
    return false;
}
options.days = options.days || 0;
options.domain = options.domain || '';
options.path = options.path || '';
if (options.days === 0) {
    document.cookie = options.key + '=' + escape(options.val) + ';domain=' + options.domain + ';path=' +
        options.path;
} else {
    var d = new Date();
    d.setDate(d.getDate() + options.days);
    console.log(d);
    document.cookie = options.key + '=' + escape(options.val) + ';domain=' + options.domain + ';path=' +
        options.path + ';expires=' + d;
}
}
setCookies({
key: 'user6',
val: '123=456;abc%sdf',
days: 7
});

获取cookie

//获取cookie
var cookieStr = document.cookie;
document.write(cookieStr);
document.write('<br/>');

//封装
function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i = 0, len = arr1.length; i < len; i++) {
        var arr2 = arr1[i].split('=');
        if (arr2[0] === key) {
            return unescape(arr2[1]);
        }
    }
    return null;
}
document.write(getCookie('user6'));
document.write('<br/>');
document.write(getCookie('user1'));

删除cookie只需要将其设置为负数。

//删除cookie
function removeCookie(key) {
    setCookies({
        key: key,
        val: '1',
        days: -5
    })
}

removeCookie('user1');
removeCookie('user2');

补充知识点:

escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

escape(string)

返回值

已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明

该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | cookie获取设置与删除
分享到: 更多 (0)

评论 抢沙发

8 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏