第二十二章 浏览器本地存储

一、本地存储

1. 本地：当前设备的当前浏览器
2. 本地存储：将数据，存储在当前计算机的当前浏览器的缓存中
3. 本地存储的特点：
   • 不能跨设备，不能跨浏览器，不能跨域
   • 只能存字符，文本
   • 有大小限制
   • 有时间限制
4. 本地存储的分类
   • cookie
     • cookie中的数据，每次会跟随http协议发往服务器
     • 大小：4k~
     • 条数：50条~
     • 时间：默认会话级（关闭浏览器清空），可以指定过期时间，不能永久存储
     • 属于DOM，document.cookie
   • localStorage
     • 不会跟随http协议发往服务器
     • 大小：5M~
     • 时间：只能永久级
     • 属于BOM，window.localStorage
   • sessionStorage
     • 不会跟随http协议发往服务器
     • 大小：5M~
     • 时间：只能会话级
     • 属于BOM，window.sessionStorage

二、通信协议

1. 通信协议，就是在互联网中，实体之间完成通信或服务所需要遵循的规则和约定。
2. 语言交流的规则：语法，主谓宾如何排列。
3. 常见的通信协议：
   • IP协议：也可以称为IP地址，用来确定地址和区分网关，每台接入互联网的设备都必须拥有独立的IP地址。
   • TCP协议：面向连接的协议（通信之前必须先建立连接），TCP相对可靠，它建立的连接的过程称为3次握手。TCP连接的特点：需要三次握手；所有的消息，需要对方确认送达
   • UDP协议：面向数据包的协议（不可靠协议）无需建立连接，发送消息也无需对方确认，无法保证数据的发送顺序，以及准确率
   • HTTP协议：是一种无状态协议，基于TCP协议的一种上层协议，用于客户端和服务器之间的通信。
     • 因为无法监听当前连接的状态，会导致每次请求页面，收到页面之后，连接会被断开
     • 一种新的技术应运而生－－－－会话跟踪技术cookie。
     • 会话跟踪技术，在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（如：是否登录，购物车信息，是否下载，是否点赞，播放进度等等）

三、cookie

cookie(会话跟踪技术)，第一次跟服务器连接后，服务器颁发一个身份令牌，记录了本次登录后的相关信息（是否登录，购物车信息等），下次再和服务器通信时，必须携带令牌，服务器会解析令牌，并根据令牌上的信息判断或执行对应功能。

1. cookie的特点

• 只能使用文本数据，也就是字符
• 有大小限制：4K~
• 有数量限制：50条~
• 不允许跨域：不能跨域，不能跨设备，不能跨浏览器，不能跨路径
• 有时效限制：默认会话级(关闭浏览器，cookie销毁)，可以设置指定日期
• 注意：安全学的基本理论：假设一个密码锁每次打开都需要重新输入密码。如果在只输入一次密码之后，都不再进行密码验证的话，就没有任何安全可言）

2. cookie的使用

1. 设置会话级默认路径cookie：
   • document.cookie = "name=abc"
   • cookie的格式要求，名称＝值
   • 在cookie 的名或值 中 不能使用分号（;）、逗号（,）、等号（=）以及空格这是cookie的赋值规则
2. 设置指定有效期cookie：
   • 设置cookie的保存时间，通过给expires添加一个日期，设置cookie的过期时间
   • 此处可以借用Date();
   • const d = new Date();
   • d.setDate(d.getDate() + 3);
     • 表示获取当前日期的天数，增加3天之后，重新设置给日期，此时date就表示未来的某个时间
   • document.cookie = "name=abc;expires=" + d;
   • 此条cookie在d的时间时效，而d的时间为当前日期加上3，也就是3天之后cookie失效
3. 设置指定路径的cookie
   • document.cookie = "user=admin;path=/;expires="+d;
4. 获取cookie
   • document.cookie
   • 注意数据解析
5. 删除cookie，相当于修改指定cookie的有效时间为过去的日期。

6. 注意事项
   • 注意语法，注意符号，注意各种需要注意的内容
   • 路径：省略时，默认以当前代码的执行文件路径作为cookie路径；子路径可以访问父路径中的cookie，父路径不能访问子路径中的cookie，兄弟路径之间的cookie不可以互相访问
   • 有效期：省略时，默认会话级，关闭浏览器即删除，可以给定一个指定的日期对象；将来的日期对象，设置为过期时间；过去的日期对象，等同于删除
   • document.cookie的重复赋值不是覆盖，而是设置一条新cookie
   • 修改cookie，需要保证cookie的名字和路径相同，值或有效期不同
   • 根据cookie的特性，cookie的使用一般处于服务器环境下

四、localStorage和sessionStorage

1. localStorage是window的子对象
2. localStorage的操作
   • 对象语法
     • localStorage.xxx;
     • localStorage.name = "admin";
     • localStorage.name = "root";
     • delete localStorage.name;
   • 专属方法
     • localStorage.setItem("name", "admin");
     • localStorage.setItem("name", "root");
     • localStorage.getItem("name");
     • localStorage.removeItem("name");
     • localStorage.clear();慎用

五、JSON

1. 什么是JSON
   • JSON特殊的具有一定格式要求的字符，是一种通用数据，如：xml
2. JSON的语法
   • json文件中的json
     1. 必须遵守js中对象的基本语法：数组，多个数据；对象，键值对
     2. 如果是键值对语法，所有的键必须添加双引号
     3. 不允许出现函数，undefined，NaN
     4. 不允许出现没有意义的逗号
     5. 一个json文件只能存储一条json数据
   • javascript中的json
     1. 必须遵守js中对象的基本语法：数组，多个数据；对象，键值对；非NaN数值和布尔亦可
     2. 如果是键值对语法，所有的键必须添加双引号
     3. 不允许出现函数，undefined，NaN
     4. 不允许出现没有意义的逗号
     5. 一个json数据必须是单引号或反引号字符（因为对象的键使用了双引号）（除数值和布尔数据）
3. js中JSON数据的转换
   • JSON字符转对象，必须遵守json的语法
     • JSON.parse(jsonStr)
   • 对象转JSON字符，必须遵守对象的语法
     • JSON.stringify(obj)

六、练习

1. 记住拖拽位置
2. 记住账号密码7天