Cookie 与 LocalStorage

作者:user 发布日期: 浏览量:16

Cookie 是什么:
- Cookie 全称 HTTP Cookie,简称 Cookie
- 是一种浏览器存储数据的一种方式
- 因为存储在用户本地,而不是存储在服务器上,所以属于本地存储
- 一般会自动随着浏览器每次请求发送到服务器

Cookie 有什么用:
- 利用Cookie 跟踪统计用户访问该网站的习惯,比如什么时间,访问了哪些页面,在每个页面停留的时间等

2、Cookie 的基本用法

写入 Cookie:
- 通过 document.cookie 等于 字符串的方式写入 Cookie,其中字符串内的形式为 Name=Value
- 多个Cookie 不能一起设置,只能一个一个设置

document.cookie = 'username=zhangsan';
document.cookie = 'age=18';

读取 Cookie:
- 读取 Cookie 使用的是 document.cookie;读取到的是由名值对构成的字符串,每个名值对之间由“; ”(一个分号一个空格)隔开
- 读取一次就会将所有的 Cookie 都读出来

console.log(document.cookie);  // username=zhangsan; age=18

3、Cookie 的属性

  • 当 Name、Domain、Path 这 3 个字段都相同的时候,才是同一个 Cookie
  • Domain、Path、Secure 都要满足条件,且还不能是过期的 Cookie 才能随着请求发送到服务器端

Cookie 的名称(Name)和值(Value):
- 名称(Name)和值(Value)是 Cookie 最重要的两个属性,创建 Cookie 时必须填写,其它属性可以使用默认值
- Cookie 的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent() 编码,读取时使用 decodeURIComponent() 解码
- 一般名称使用英文字母,不要使用中文,值可以使用中文,但是要编码

// 编码
document.cookie = `username=${encodeURIComponent('张三')}`;
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`;

// 解码

失效(到期)时间:
- 对于失效的 Cookie,会被浏览器清除
- 如果没有设置失效时间,这样的 Cookie 称为会话 Cookie(Session),它存在内存中,当会话结束,也就是浏览器关闭时,Cookie 消失
- 想设置 Cookie 长时间存在,设置 expire 或 max-age
- expire 的值为 Date 类型
- max-age 的值为数字,表示当前时间 + 多少毫秒后过期,单位是秒;如果 max-age 的值是 0 或 负数,则 Cookie 会被删除

// expire
document.cookie = `username=zhangsan; expire=${new Date('2021-6-20 00:00:00')}`;

// max-age
document.cookie = 'username=zhangsan; max-age=10';
document.cookie = `username=zhangsan; max-age=${24*3600*1000 }`;

Domain 域:
- Domain 限定了访问 Cookie 的范围(不同域名)
- 使用 JS 只能读写当前域或父域的 Cookie,无法读写其它域的 Cookie

document.cookie = 'username=zhangsan; domain=127.0.0.1';

Path 路径:
- Path 限定了访问 Cookie 的范围(同一个域名下)
- 使用 JS 只能读写当前路径和上一级路径的 Cookie,无法读写下一级路径的 Cookie

document.cookie = 'username=zhangsan; path=/test';

HttpOnly:
- 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

Secure 安全标志:
- Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送 Cookie 给服务端

4、Cookie 的封装

// cookie.js

// 写入 Cookie
const set = (name, value, {maxAge, domain, path, secure} = {}) => {
    let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent('value')}`;

    if(typeof maxAge === 'number') {
        cookieText += `; max-age=${maxAge}`;
    }

    if(domain) {
        cookieText += `; domain=${domain}`;
    }

    if(path) {
        cookieText += `; path=${path}`;
    }

    if(secure) {
        cookieText += `; secure`;
    }
    document.cookie = cookieText;
};

// 通过 name 获取 cookie 值
const get = name => {
    name = `${encodeURIComponent(name)}`;
    const cookies = document.cookie.split('; ');

    for(const item of cookies) {
        const { cookieName, cookieValue } = item.split('=');
        if(cookieName == name) {
            return decodeURIComponent(cookieValue);
        }
    }

    return ;
};

// 根据 name、domain、path 删除 cookie
const remove = (name, {domain, path} = {}) => {
    set(name, '', {domain, path, maxAge:-1});
};

export { set, get, remove };

5、Cookie 的注意事项

  • 前后端都可以写入和获取 Cookie
  • Cookie 有数量限制
    每个域名下的 Cookie 数量有限,具体数量由浏览器决定
    当超过单个域名限制之后,再设置 Cookie,浏览器就会清除之前设置的 Cookie
  • Cookie 有大小限制
    每个 Cookie 的存储容量很小,最多只有 4Kb 左右

二、LocalStorage

1、LocalStorage 的基本用法

初识 LocalStorage:
- localStorage 也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端
- 单个域名下的 localStorage 总大小有限制

LocalStorage 的基本用法:
- 添加 localStorage 使用 setItem(‘key’, ‘value’)

localStorage.setItem('username', 'zhangsan');
localStorage.setItem('age', 18);
localStorage.setItem('sex', 'male');
  • 获取 localStorage 使用 getItem(‘key’)
console.log(localStorage.getItem('username'));   // zhangsan
console.log(localStorage.getItem('age'));  // 18
console.log(localStorage.getItem('sex'));  // male
// 获取不存在的会返回 null
console.log(localStorage.getItem('name'));   // null
  • 删除 localStorage 使用 removeItem(‘key’) 单个删除
  • 删除 localStorage 使用 clear() 全部删除
localStorage.removeItem('username');
// 删除不存在的 key,不会报错
localStorage.removeItem('name');

// 全部删除
localStorage.clear();
  • 查看 localStorage 的长度使用 length
console.log(localStorage.length);

// 显示 localStorage 的内容
console.log(localStorage);

2、LocalStorage 的注意事项

  • localStorage 的存储期限:
    localStorage 是持久化的本地存储,除非手动清除(比如通过 JS 删除,或者清除浏览器缓存),否则数据是永远不会过期的
  • localStorage 键和值的类型:
    localStorage 存储的键和值只能是字符串类型
    不是字符串类型,也会先转为字符串类型再存进去(localStorage 会自己转)
  • 不同域名下能否共用 localStorage
    不同域名下不能共用 localStorage 的
  • localStorage 的兼容性
    IE7 及其以下版本不支持 localStorage,从 IE8 开始支持

3、sessionStorage

sessionStorage 的存储期限:
- 当会话结束(比如关闭浏览器)的时候,sessionStorage 中的数据会被清空

sessionStorage 的用法:
- sessionStorage 的用法和 localStorage 相似,同样有 setItem()、getItem()、removeItem()、clear() 和 length

// 添加 sessionStorage
sessionStorage.setItem('username', 'zhangsan');
sessionStorage.setItem('age', 18);

// 获取 sessionStorage
console.log(sessionStorage.getItem('username'));  // zhangsan
console.log(sessionStorage.getItem('name'));  // null

// 删除单个 sessionStorage
sessionStorage.removeItem('age');

// 清空 sessionStorage
sessionStorage.clear();

// 显示sessionStorage长度
console.log(sessionStorage.length);

总结