初识Cookie
(1)Cookie是什么
是浏览器存储数据的一种方式因为存储在用户本地，而不是存储在服务器上，是本地存储
一般会自动随着浏览器每次请求发送到服务器端
(2)Cookie有什么用
利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面的停留时间等。
(3)在浏览器中操作Cookie
不要在Cookie中保存密码等敏感信息
2、Cookie的基本用法
（1）写入Cookie:js语法document.cookie="";不能一起设置,只能一个一个设置。document.cookie = "usname=zs";//js写入cookie
（2）读取Cookie:读取cookie是一个由名值对构成的字符，每个名值对之间由“;”（一个分号一个空格）隔开
console.log(document.cookie);//读取cookie
3、Cookie的属性
（1）cookie名称（Name）和值（Value）
最重要的两个属性，创建Cookie时必须填写，其它属性可以使用默认值
cookie的名称或值如果包含非英语字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURlComponent()解码
一般名称使用英文字母，不要用中文，值可以用中文，但是要编码。
encodeURIComponent(里面必须是字符串) 函数可把字符串作为 URI 组件进行编码。
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
document.cookie = `${encodeURIComponent("用户名")}=${encodeURIComponent(
"张三"
)}`;//非英文字母用encodeURLComponent（）编码
（2）失效（到期）时间
对于失效的Cookie,会被浏览器清除
如果没有设置失效（到期）时间，这样Cookie称为会话Cookie
它在内存中，当会话结束，也就是浏览器关闭时，Cookie消失
想要长时间存在，设置expires或者max-age
expires的值为Date类型
document.cookie = `usname=zs;expires=${new Date("2026-1-01 00:00:00")}`;
max-age的值为数字，表示当前时间+多少秒后过期，单位是秒。
document.cookie = `usname=zs;max-age=5`;//存在5秒
如果max-age的值是0或者是负数，则Cookie会被删除。
(3)Domain域：Domain限定了访问Cookie的范围
我们使用js只能读写当前域或父域的Cookie,无法读写其他域的cookie(4)Path路径，path限定了访问cookie的范围（同一个域名下）
使用js只能读取当前路径和上级路径的cookie，无法读写下级路径的cookie
当name domain path 这3个字段都相同的时候，才是同一个Cookie
(5)HttpOnly设置了HttpOnly属性的CooKie不能通过js去访问
(6)Secur限定了只有在使用了https而不是http的情况下才可以发送给服务端
domian、path、secure都要满足条件，还不能过期的cookie才能随着请求发送到服务器端
4、Cookie的封装
(1):封装Cookie
1 // 封装写入cookie
2 // 创建cookie
3 const set = (name, value, { maxAge, domain, path, secure } = {}) => {
4 //把最重要的cookie值单独写进形参，后面的以{}形式传入，并设置函数默认值，不设置默认值则报错
5 let cookies = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
6 //写一个自己传入的cookie名称和值，并用encodeURIComponent()函数转化；以免对方传递的不是英语
7 if (typeof maxAge === "number") {
8 // 判断maxAge传入的值是否是数字
9 cookies += `; max-Age=${maxAge}`;
10 }
11 if (domain) {
12 // 只要用户传入就可以直接使用，不传入等于默认值（undefined）
13 cookies += `; domain=${domain}`;
14 }
15 if (path) {
16 cookies += `; maxAge=${path}`;
17 }
18 if (secure) {
19 cookies += `; secure`;
20 }
21 document.cookie = cookies;
22 //定义cooki=自己封装的这个
23 };
24 //得到cookie的单个
25 const get = (name) => {
26 name = encodeURIComponent(name);
27 // 先将其转换成编译后的
28 const cookiea = document.cookie.split("; ");
29 //得到全部的cookie,将他转为数组；
30 for (const key of cookiea) {
31 //遍历cookie数组,
32 const [cookiekey, cookievalue] = key.split("=");
33 //将遍历好的数组结构赋值给cookiekey, cookievalue方便下面做判断；
34 if (cookiekey === name) {
35 // 用编译后的name与前面的cookiekey进行判断
36 return decodeURIComponent(cookievalue);
37 //如果cookie的名字与前面的name一样则返回值是它的值
38 }
39 }
40 return;
41 //如果获取一个没有cookie;则返回undefined
42 };
43 // 删除cookie
44 const remove = (name, { domain, path } = {}) => {
45 set(name, "", { domain, path, maxAge: -1 });
46 //核心调用set,然后把maxage=-1;
47 };
48
49 export { set, get, remove };
(2):使用封装好的Cookie实现网站语言切换
let cn = document.querySelector("#cn");
let en = document.querySelector("#en");
cn.addEventListener("click", () => {
// 点击中文，用set()创建cookie
set("language", "cn", { maxAge: 30 * 24 * 3600 });
window.location = "./cookie.html";
//强制刷新当前页面
});
en.addEventListener("click", () => {
set("language", "en", { maxAge: 30 * 24 * 3600 });
window.location = "./cookie.html";
});
5、Cookie的注意事项
（1）前后端都可以写入和获取Cookie
（2）Cookie有数量限制：每个域名下的cookie数量有限20-50左右；当超过单个域名限制之后，再设置cookie,浏览器就会清除以前设置的cookie
（3）Cookie有大小限制：每个cookie的储存容量很小，最多只有4kb左右;
localStorage
1、初识localStorage
（1）localStorage是什么
localStorag是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端。
单个域名下localStorage有总体内存大小限制（5m左右）
（2）在浏览器中操作localStorage
（3）localStorage的基本用法
setltem():输入单个的键名和值
getltem():获取里面的键名，获取不存在的返回null
removeltem():删除单个,删除不存在的，不存在，
clear():清除所有；
（4）使用localStorage实现自动填充
form表单中可通过点语法name获取到这个元素
const form = document.querySelector("#bd");
const btn = document.querySelector("#btn");
const usname = localStorage.getItem("usname"); //将获取到的值给usname
if (usname) {
//判断是否得到了这个值。
form.name.value = usname; //如果里面有值则把这个值给元素的value
}
btn.addEventListener("click", (e) => {
e.preventDefault(); //组织表单默认行为
localStorage.setItem("usname", form.usname.value); //form表单中可以通过点语法，点属性得到对应的元素。
form.submit(); //手动使用from的submit方法提交
});
2、localStorage的注意事项
（1）localStorage存储期限：localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据永远不会过期。
（2）localStorage键和值的类型：存储的键和值只能是字符串类型，不是字符串类型，也会先转成字符串类型再存进去。
（3）不同域名下能否共用localStorage：不能共用localStorage
（4）localStorage的兼容性：ie7以下版本不支持localStorage，ie8开始支持localStorage，https://caniuse.com/查询是否兼容网址
3、sessionStorage会话存储
（1）会话结束（浏览器关闭），sessionStorage中的数据就会被清空。
（2）sessionStorage使用和localStorage一样
标签：name,localStorage,usname,cookie,Cookie,document From： https://www.cnblogs.com/ffhyy/p/17107745.html