浏览器存储方式

Cookie

记录用户使用习惯：何时访问，访问内容，每个页面停留时间操作
公开透明，不要在cookie中保存敏感信息

特点

1.存于用户本地，浏览器每次请求后，自动发送到服务器端
2.有数量限制
每个域名下的 Cookie 数量有限
当超过单个域名限制之后，再设置 Cookie，浏览器会清除之前设置的
3.有大小限制
每个 Cookie 的存储容量很小，最多只有 4KB 左右

用法

写

浏览器不能写入cookie。服务器可写入cookie

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

错误写法：

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

读

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

属性

同一个cookie的Name\Domain\Path三个字段都要相同

Name

名称用英文

Value

值可用中文。
中文要编码解码
encodeURLComponent()编码（写）
decodeURLComponent()解码（读）

document.cookie = "username=${encodeURLComponent(张三)}";

失效时间-失效后浏览器清除cookie

1.未设置失效时间的cookie，叫会话cookie(session)；
存在于内存中，浏览器关闭时（会话结束时），cookie消失
2.设置失效时间-expires/max-age
1）expires值为Date类型

document.cookie = "username=zs;expires=${new Date('2100-1-01-00:00')}";

2）max-age值为数字，单位：秒
值为0/负数，直接删除

document.cookie = "username=zs;max-age=5";
document.cookie = "username=zs;max-age=${24*3600*30}"

Domain-限定cookie访问范围（不同域名）

不能跨Domain读写，只读写当前域或者父域
例：
PC端 www.imooc.com
移动端m.imooc.com
父域 imooc.com

Path-限定cookie访问范围（同一域名下）

只读写当前路径或上级路径的cookie，无法读写下级路径的cookie

HttpOnly-阻止通过JS访问

Secure-限定用https(而不是http)才可发给服务端

cookie请求发送到服务器端的条件-Domain、Path、Secure、不能过期

应用-实现网站语言的切换

前后端都可以创建 Cookie-依业务需求而定

localStorage

特点

1.存于用户本地，不会发送到服务器端
2.是持久化的本地存储：
除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的
3.不同的域名不能共用 localStorage
IE7及以下版本不支持 localStorage，IE8 开始支持

键和值是字符串类型

若不是字符串类型，会被转换再存

localStorage.setItem({}, 18);
// localStorage.setItem('students', [{},{}]);
console.log(
  typeof localStorage.getItem('[object Object]'),
  localStorage.getItem('[object Object]')
); 
console.log({}.toString());

属性

length

console.log(localStorage.length);

方法

setItem()

localStorage.setItem("username", "alex");
localStorage.setItem("username", "zs");
localStorage.setItem("age", 18);
localStorage.setItem("sex", "male");

getItem()

console.log(localStorage.getItem("username"));
console.log(localStorage.getItem("age"));
// 获取不存在的返回 null
console.log(localStorage.getItem("name"));
removeItem()
localStorage.removeItem("username");
localStorage.removeItem("age");
// 删除不存在的 key，不报错
localStorage.removeItem("name");

clear()

localStorage.clear();
console.log(localStorage);

应用-实现自动填充

<form id="login" action="https://www.imooc.com" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" id="btn" value="登录" />
</form>
const loginForm = document.getElementById("login");
const btn = document.getElementById("btn");
const username = localStorage.getItem("username");
if (username) {
	loginForm.username.value = username;
}
btn.addEventListener(
	"click",
	(e) => {
		//阻止默认提交
		e.preventDefault();
		// 数据验证（此处省略）
		// console.log(loginForm.username.value);
		localStorage.setItem("username", loginForm.username.value);
		//手动提交
		loginForm.submit();
	},false);

sessionStorage

当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空

sessionStorage.setItem('username', 'alex');
sessionStorage.getItem('username');
sessionStorage.removeItem('username');
sessionStorage.clear();

对比

/	cookies	localStorage
存储量	最大4kb	5mb或更大
特点	在服务器与浏览器间传递	存储在浏览器,不发给服务器
有效期	在限定的时间内有效	不手动清除永久有效