数据存储Cookie

最新推荐文章于 2024-05-28 14:12:23 发布

原创最新推荐文章于 2024-05-28 14:12:23 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cookie #数据存储 #浏览器

DOM 专栏收录该内容

20 篇文章

订阅专栏

浏览器中的Cookie是一段小型的文本文件，根据不同浏览器对Cookie的实现大概都是在4kb左右。由键值对构成，键值对之间是有分号和空格隔开。
虽然Cookie是在浏览器端储存，但我们一般都在服务器端设置，我们可以在Http返回值里面通过设置Set-Cookie来告诉浏览器我们需要存储的cookie。

属性

属性名	默认值	作用
Name		名
Value		值
Domain	当前文档域	作用域
Path	当前文档路径	作用路径
Expirs/Max-Age	浏览器会话时间	失效时间
Secure	false	http协议时生效

想表示一个唯一的cookie，需要Name，Domain，Path的组合。

作用域

当我们设置Path为根目录的时候，设置domain:A，我们访问A时会带上Cookie；设置domain:B，我们访问B时会带上Cookie。当我们设置Domain为父域的时候，我们访问A、B都会带上这个Cookie。

作用路径

在作用域相同的时候，比如我们设置domain：A，我们设置Path：/a，那么在访问A/a时带上Cookie；设置domain：A，我们设置Path：/b，那么在访问A/b时带上Cookie。当我们设置路径为path：/（根目录）时，我们访问子目录都会带有cookie。

读取

我们需要将Cookie转化为JS对象

funciton getCookie(){
    var cookie = {};
    var all = document.cookie;
    if(all === '')
        return cookie;
    var list = all.split(';');
    for(var i = 0;i<list.length;i++){
        var item = list[i];
        var p = item.indexOf('=');
        var name = item.substring(0,p);
        name = decodeURIComponent(name);
        var value = item.substring(p + 1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

设置/修改

我们可以直接使用赋值来修改

document.cookie = 'name = value';

也可以封装一个函数：

function setCookie(name,value,expires,path,domanin,secure){
    var cookie = encondeURIComponent(name) + '=' + encodeURIComponent(value);
    if(expires)
        cookie += '; expires=' + expires.toGMTString();
    if(path)
        cookie += '; path=' + path;
    if(domain)
        cookie += '; domain=' + domain;
    if(secure)
        cookie += '; secure' + secure;
    documrnt.cookie = cookie;
}

删除

制定一个cookie的名字，路径，域指定为唯一标识的，然后将max-age设为0即可；

function removeCookie(name,path,domain){
    document.cookie = name + '=' + '; path=' + path + '; domain=' + domain + '; max-age=0';
}

缺陷

流量代价
安全性问题，明文传递
有大小限制