浏览器缓存：Cookie、LocalStorage、SessionStorage的对比分析

最新推荐文章于 2024-08-22 17:49:29 发布

编程小猹

最新推荐文章于 2024-08-22 17:49:29 发布

阅读量1.6k

点赞数 21

分类专栏：面试文章标签：缓存 html5 javascript 浏览器缓存

本文链接：https://blog.csdn.net/m0_74229735/article/details/136708841

版权

面试专栏收录该内容

32 篇文章 3 订阅

订阅专栏

先分别介绍一下这三种浏览器缓存。

Cookie

Cookie是什么

Cookie是一种存储在用户计算机上的小型文本文件，由网站通过浏览器存储在用户计算机上。它通常包含有关用户和网站之间交互的信息。

Cookie的作用

当我们打开一个网站时，如果这个网站我们曾经登录过，那么当我们再次打开网站时，发现就不需要再次登录了，而是直接进入了首页。就比如我们现在用的csdn网站。

这是怎么做到的呢？其实就是游览器保存了我们的cookie，里面记录了一些信息，当然，这些cookie是服务器创建后返回给游览器的。游览器只进行了保存。下面展示csdn网站保存的cookie。

Cookie的表示

从上图我们可以看出，cookie是以键值对进行表示的(key-value)，例如login_username=kjz，这个就表示cookie的名字是login_username，cookie携带的值是kjz。

Cookie的组成

下面我自己写了一个简易Servlet来设置cookie，我们游览器抓包进行查看。然后进行分析

以下是cookie中常用属性的解释。

Name：这个是cookie的名字
Value：这个是cooke的值
Path：这个定义了Web站点上可以访问该Cookie的目录
Expires：这个值表示cookie的过期时间，也就是有效值，cookie在这个值之前都有效。
Size：这个表示cookie的大小

Cookie的HTTP传输

之前写过对会话技术的总结，里面有写Cookie是如何在http协议中传输的，读者可以去看看这篇文章：会话技术------Cookie、Session、Token（JWT）详解_session.hashcode-CSDN博客

Cookie的生命周期

cookie有2种存储方式，一种是会话性，一种是持久性。

会话性：如果cookie为会话性，那么cookie仅会保存在客户端的内存中，当我们关闭客服端时cookie也就失效了
持久性：如果cookie为持久性，那么cookie会保存在用户的硬盘中，直至生存期结束或者用户主动将其销毁。
cookie我们是可以进行设置的，我们可以人为设置cookie的有效时间，什么时候创建，什么时候销毁。

Localstorage

localStorage 是 Web Storage API 提供的一种在浏览器中存储数据的方式。它允许你将数据存储在浏览器中，以便在同一域名下的页面之间进行共享和持久化。

使用 localStorage 可以方便地存储键值对的数据，并且该数据会一直保存在用户的浏览器中，直到被清除或者网站代码显式移除。

如何访问 LocalStorage

访问 LocalStorage 非常简单，只需几个步骤：

转到任何网站或 Web 应用程序，然后按F12键盘打开浏览器控制台。
接下来，单击应用程序选项卡，在左侧菜单中，您将LocalStorage在存储选项卡下看到如下所示。

基本用法

setItem（）

此方法用于将数据存储在 LocalStorage 中。它接受一个键作为它的第一个参数，然后一个值作为第二个参数。

让我们LocalStorage使用以下内容添加数据。

localStorage.setItem("name", "kjz");
// `name`是键，`kjz`是值

LocalStorage 会将数据存储为字符串，所以如果要保存对象和数组等数据，需要使用JSON.stringify()方法将它们转换为字符串。

例如：

const user = {
  name: "小明",
  age: 23,
};

localStorage.setItem("user-info", JSON.stringify(user));
const names = ["小明", "小张", "小王"];
localStorage.setItem("names", JSON.stringify(names));

getItem()

使用getItem()方法从 LocalStorage 中检索数据。此方法接受单个参数，key用于保存数据。

例如，要检索上述user对象等数据，您将使用以下语句：

localStorage.getItem("user-info");

上面的代码将返回一个JSON字符串，如下所示：

"{name:"小明", age:"23"}"

然后，您应该使用该JSON.parse()方法将其转换为对象。

JSON.parse(localStorage.getItem('user-info'));

removeItem()

使用removeItem()方法从 LocalStorage 中删除数据。此方法接受 key作为参数。

例如，您将使用以下语句user从 LocalStorage 中删除对象。

localStorage.removeItem("user-info");

clear（）

使用该clear()方法清除或删除特定实例的 LocalStorage 中的所有数据。

localStorage.clear()

SessionStorage

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据（key/value），在关闭窗口或标签页之后将会删除这些数据。是window下的对象。

特点

只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
存储方式。seesionStorage的存储方式与localstorage一样采用key、value的方式。value的值必须为字符串类型。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

seesionStorage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储，我们可以通过JSON.stringify()将json数据类型转化成字符串，再存储到sessionstorage中就可以了，获取数据时再使用JSON.parse()将读取的字符串转换成对象即可。（数组本质上也是对象类型）

基本用法

存储数据到 sessionStorage

sessionStorage.setItem('key', 'value');

从 sessionStorage获取数据

const valueFromSession = sessionStorage.getItem('key');

移除 sessionStorage中的数据

sessionStorage.removeItem('key');

清空整个sessionStorage中的数据

sessionStorage.clear();

分析三种浏览器的区别

（1）生命周期不同

Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。

localStorage 除非被永久清除，否则永久保存。

sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除

（2）存放数据的大小不同

Cookie 一般为4KB

localStorage 和 sessionStorage 一般为5MB

（3）与服务器端通信不同

Cookie 每次都会携带到HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage 和 sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信。

（4）易用性

Cookie 需要程序员自己来封装，原生的cookie接口不够友好

localStorage 和 sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持。