本地存储

Lán2022年11月11日

HTML

HTML

大约 3 分钟

本地存储

Cookie 全称 HTTP Cookie，简称 Cookie
是浏览器存储数据的一种方式
因为存储在用户本地，而不是存储在服务器上，是本地存储
一般会自动随着浏览器每次请求发送到服务器端

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

不要在 Cookie 中保存密码等敏感信息

基本用法

不能一起设置，只能一个一个设置，读取的是一个由名值对构成的字符串，每个名值对之间由“; ”（一个分号和一个空格）隔开

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

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

属性

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

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

一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

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

document.cookie = `username=alex; expires=${new Date(
  '2100-1-01 00:00:00'
)}`;
document.cookie = 'username=alex; max-age=5';
document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;
document.cookie = 'username=alex; max-age=0';
document.cookie = 'username=alex; max-age=-1';

Domain 域
Domain 限定了访问 Cookie 的范围（不同域名）
使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie

document.cookie = 'username=alex; domain=www.imooc.com';
// www.imooc.com m.imooc.com 当前域
// 父域：.imooc.com

Path 路径
Path 限定了访问 Cookie 的范围（同一个域名下）
使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie

document.cookie = 'username=alex; path=/course/list';
document.cookie = 'username=alex; path=/1.Cookie/';

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

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

Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端

前后端都可以创建 Cookie
每个域名下的 Cookie 数量有限
当超过单个域名限制之后，再设置 Cookie，浏览器就会清除以前设置的 Cookie
Cookie 有大小限制，每个 Cookie 的存储容量很小，最多只有 4KB 左右

localStorage

localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端

单个域名下的 localStorage 总大小有限制

localStorage 的基本用法: setItem()、getItem()、removeItem()、clear()
获取不存在的返回 null
删除不存在的 key，不报错

localStorage 是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的
sessionStorage当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空

localStorage 存储的键和值只能是字符串类型，不是字符串类型，也会先转化成字符串类型再存进去

不同的域名是不能共用 localStorage 的

IE7及以下版本不支持 localStorage，IE8 开始支持（https://www.caniuse.com）

本地存储

# 本地存储

# Cookie

# 基本用法

# 属性

# localStorage

本地存储

Cookie

基本用法

属性

localStorage