前端数据存储技术

存储技术

1、Cookie
2、SessionStorage 会话存储(H5+)
3、localStorage 本地存储(H5+)
4、应用程序缓存 通过缓存文件设置(H5+)
5、本地数据库

应用
1、临时存储一些数据
2、免密码登录

Cookie （本身是字符串，需要自己封装API）

主要特征：
1、用来进行身份识别(每次通信的时候，Cookie数据都会自动被提交到服务器端)
2、存储数据

注意点
1、Cookie数据存在限制大小(4KB) 数量(<50)
2、Cookie不能跨浏览器
3、Cookie在相同的域中可以共享，但是不同的域不能访问
4、Cookie默认有效期是当前的会话，当前会话结束那么Cookie数据就会被删除，过期时间可以通过代码来设置
（当前会话结束=关闭浏览器，不是关闭当前页面）

/* 基本操作： */
/* (1) 如何存储Cookie */
document.cookie = "name=zs";

/* 获取3天之后的时间 */
let date = new Date();
date.setDate(date.getDate() + 3);
document.cookie = "age=19;expires=" + date;

/* (2) 如何读取Cookie */
console.log(document.cookie);

sessionStorage （本身是对象，有标准API）

大小：2M-5M
期限：当前会话，不能设置

localStorage （本身是对象，有标准API）

大小：20M
期限：无限

标准API
1、setItem("name", "zs") 设置
2、getItem("name") 读取
3、removeItem("age") 删除
4、clear() 清空