知识调用

文章中可能用到的知识点
前端学习：浏览器缓存方式有哪些（ cookie localstorage sessionstorage）
如何查看Chrome浏览器的页面缓存内容【详细教程】
如何清除浏览器缓存（快捷键+手动）
cookie、sessionStorage和localStorage的区别（一）

前言引入

在之前几期文章（见知识调用）中，我们了解了cookie、sessionStorage和localStorage的区别（一）。本期文章将无缝对接，将 以cookie、sessionStorage和localStorage的区别为核心，进一步展开介绍。

大致内容安排如下：👇👇👇

文章发展线
cookie、sessionStorage和localStorage的区别（一）详细比较【已完成】
cookie、sessionStorage和localStorage的区别（二）精简概念
localstorage的基本用法——存储、读取、删除
sessionstorage的基本用法——存储、读取、删除
vue3 antd table 表格的增删改查（三）利用localstorage修改数据

核心干货

webstorage本地存储

在这里插入图片描述
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
4）WebStorage的目标

提供一种在cookie之外存储会话数据的路径
提供一种存储大量可以跨会话存在的数据的机制
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

5）作用域的不同：

不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

6）存储大小：5MB
7）存储位置：都保存在客户端，不与服务器进行交互通信
8）存储内容类型：只能存储字符串类型
9）获取方式：

localStorage：window.localStorage;
sessionStorage：window.sessionStorage;

10）应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录

11）WebStorage的优点：

存储空间更大
节省网络流量
快速显示
安全性高一些

WebStorage提供了一些方法，数据操作比cookie方便

setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

cookie

在这里插入图片描述

1）HTTP Cookie简称cookie，通过name=value的形式存储
2）cookie的构成：

名称：name(不区分大小写,但最好认为它是区分的)
值:value(通过URL编码:encodeURIComponent)
域
路径
失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
安全标志:设置安全标志后只有SSL连接的时候才发送到服务器

3）cookie的作用:主要用于保存登录信息
4）生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
有个数限制（各浏览器不同），一般不能超过20个。
与服务器端通信：每次都会携带在HTTP头中。
5）cookie的优点：

具有极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术，减少cookie被破解的可能性
只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
控制cookie的生命期，使之不会永远有效。

6）cookie的缺点：

cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若计数器保存在客户端，则起不到什么作用

sessionStorage

1）sessionStorage是Storage类型的一个对象，拥有 clear()、getItem(name)、key(index)、removeItem(name)、setItem(name,value) 方法
2）sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭
3）将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
4）sessionStorage为临时保存

localStorage

1）localStorage也是Storage类型的一个对象
2）在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)
3）localStorage会永久存储会话数据，除非removeItem，否则会话数据一直存在
4）将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
5）==localStorage为永久保存=

图示说明：
在这里插入图片描述
注意：时刻注意XSS注入的风险，因为可以在控制台直接访问它们，所以不要存入敏感数据