【Vue】浏览器缓存sessionStorage、localStorage、Cookie

这篇具有很好参考价值的文章主要介绍了【Vue】浏览器缓存sessionStorage、localStorage、Cookie。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、sessionStorage

1、简介

2、方法

3、代码示例

a、存取单个数据

b、存取对象

c、清除数据

二、localStorage

1、简介

2、方法

3、代码示例

三、cookie

1、简介

2、方法

3、代码示例

四、三者区别

1、sessionStorage与localStorage区别

2、sessionStorage、localStorage、cookie区别

五、往期相关优质推荐


vue 浏览器缓存,vue.js,前端,javascript

一、sessionStorage

1、简介

sessionStorage用于在浏览器会话期间存储数据,数据仅在当前会话期间有效。
存储的数据在用户关闭浏览器标签页或窗口后会被清除。

2、方法

  • 使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。
  • 使用sessionStorage.getItem(key)方法根据键获取存储的值。
  • 使用sessionStorage.removeItem(key)方法根据键删除存储的值。

3、代码示例

列表页搜索条件缓存, 使用sessionStorage实现简单的功能, 
存储数据+读取数据+清除数据

a、存取单个数据

sessionStorage.setItem("param", "我叫你一声你敢答应吗?");
let param = sessionStorage.getItem("param")
//我叫你一声你敢答应吗?
console.log(param ); 

b、存取对象

sessionStorage也可存储Json对象:
存储时,通过JSON.stringify()将对象转换为文本格式;
读取时,通过JSON.parse()将文本转换回对象。
sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
if (sessionStorage.getItem("queryParams")) {
  this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}

c、清除数据

sessionStorage.removeItem("queryParams");

二、localStorage

1、简介

  •    localStorage用于在浏览器中永久存储数据,即使用户关闭浏览器标签页或窗口,数据仍然保留。
  •    存储的数据不会自动过期,除非显式地从代码中删除或用户清除浏览器缓存。
  •    存放数据大小一般为5MB;
  •    仅在浏览器中保存,不参与服务器通信;

2、方法

  1.     使用localStorage.setItem(key, value)方法将数据存储在localStorage中。
  2.     使用localStorage.getItem(key)方法根据键获取存储的值。
  3.     使用localStorage.removeItem(key)方法根据键删除存储的值。

3、代码示例

// 设置localStorage中的数据
localStorage.setItem('key', 'value');
// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value);  // 输出:value
// 删除localStorage中的数据
localStorage.removeItem('key');

三、cookie

1、简介

  • Cookie是一种在浏览器中存储数据的机制,用于跟踪和识别用户。
  • 可以设置Cookie的过期时间,使数据在指定时间后失效。
  • 即使用户关闭浏览器,存储在Cookie中的数据也可以保留,除非设置了过期时间。

2、方法

  1. 使用document.cookie属性进行设置和获取Cookie值。
  2. 使用document.cookie = "key=value; expires=expiration_time; path=/;"语法设置Cookie。
  3. 使用document.cookie获取所有Cookie值。
  4. 使用document.cookie = "key=; expires=expiration_time; path=/;"语法删除Cookie。

3、代码示例

// 设置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";
// 获取所有cookie
const cookies = document.cookie;
console.log(cookies);
// 删除cookie
document.cookie = "key=; expires=expiration_time; path=/;";

四、三者区别

这些存储机制各有优劣和适用场景。

sessionStorage适用于在会话期间保持数据,
localStorage适用于需要永久存储数据的场景,
而Cookie用于跟踪用户和设置过期时间的需求。

根据具体的应用需求,选择适合的存储机制可以更好地管理和存储数据。

1、sessionStorage与localStorage区别

  • sessionStorage在浏览器会话期间有效,而localStorage是持久的。
  • sessionStorage在用户关闭浏览器标签页或窗口时会被清除,而localStorage会一直保留。
  • sessionStorage和localStorage的使用方法相似,都是使用setItem、getItem和removeItem方法进行操作。

2、sessionStorage、localStorage、cookie区别

  1. 存储容量:sessionStorage和localStorage都提供了大约5MB的存储空间,而Cookie只能存储4KB的数据。
  2. 生命周期:sessionStorage的数据在单个会话期间有效,关闭浏览器后数据将被清除;localStorage的数据是永久性的,除非手动清除或代码删除;Cookie可以设置过期时间,可以在指定时间之前保持有效。
  3. 存储位置:sessionStorage、localStorage和Cookie数据都存储在客户端,不涉及服务器。
  4. 存储机制:sessionStorage、localStorage和Cookie都使用键值对的方式存储数据。
  5. 跨窗口通信:sessionStorage和localStorage不支持跨窗口通信,而Cookie支持。
  6. 跨域名访问:sessionStorage和localStorage不支持跨域名访问,而Cookie支持。
  7. 浏览器支持:sessionStorage和localStorage在现代浏览器中得到支持,而Cookie在所有浏览器中都可用。
  8. 与服务器交互:sessionStorage、localStorage不会自动发送数据到服务器,而Cookie在每次HTTP请求中都会自动发送到服务器。
特性 sessionStorage localStorage cookie
存储容量 5MB 5MB 4KB
生命周期 单个会话期间 永久 可设置
存储位置 客户端 客户端 客户端
存储机制 键值对 键值对 键值对
跨窗口通信 不支持 不支持 支持
跨域名访问 不支持 不支持 支持
浏览器支持 现代浏览器 现代浏览器 所有浏览器
与服务器交互 不自动发送 不自动发送 自动发送

五、往期相关优质推荐

VSCode 最全实用插件(VIP典藏版)
Vue超详细整理(VIP典藏版)
Vue中created,mounted,updated详解
一文快速上手Echarts(持续更新)
Vue中el-table数据项扩展各种类型总结(持续更新)

vue 浏览器缓存,vue.js,前端,javascript

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!文章来源地址https://www.toymoban.com/news/detail-727769.html

到了这里,关于【Vue】浏览器缓存sessionStorage、localStorage、Cookie的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目版本打包更新后文件及浏览器存在缓存问题解决方案

    在vue.config.js中配置output,打包后的文件会带时间戳 在public/static目录下新建version.json文件  在src中新建 utils文件夹 文件夹中新建versionUpdate.js文件  在src文件夹下创建addVersion.js  写法二 修改package.json中scripts中的打包命令 版本号自加使用fs修改文件来实现 具体思路是:在执行

    2024年02月11日
    浏览(43)
  • vue解决浏览器中跳转新页面缓存上一页表单等内容方法

    在工作中,有可能会遇到需要缓存页面或组件的功能。 情况1 :比如在h5中有个一个50个表单,在填到第40个表单时,需要你去另一个新页面去选择列表项,然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。 此功能在微信小程序是

    2024年02月08日
    浏览(55)
  • 将JWT令牌存储到浏览器中localStorage中,并且往页面请求头中添加token

    其中response.data.data是后端返回的数据为jwt字符串 在vue中的main.js添加如下再带,axios便会拦截所有请求并且如果localStorage有token则会添加到页面的请求头中

    2024年02月21日
    浏览(49)
  • 如何清理电脑浏览器缓存,4款常用浏览器清理缓存的方法

    浏览器是人们在网络生活中不可缺少的存在,我们使用各种浏览器上网的时候,可能会出现各种程序出错的问题。或者,可能使用浏览器的时间就了,发现电脑有点卡顿,这时候就需要情况缓存了。那么,如何清理电脑浏览器的缓存呢?下面分享4款常用浏览器清理缓存的方法

    2024年02月04日
    浏览(65)
  • 浏览器缓存(强缓存、协商缓存)

    这一点主要解析浏览器缓存以及缓存机制的详细过程。 与缓存相关的状态码: 200 ok    从浏览器下载的最新资源 200 (from memory cache)    不进行http请求,直接从浏览器内存中读取的资源,页面关闭,则资源释放,一般一些脚本、图片、文字等会存在内存中 200 (from disk cache) 

    2024年04月17日
    浏览(46)
  • 浏览器强缓存与协商缓存

    强制缓存的思想是,在浏览器内置数据库中缓存每次请求中 “可以被缓存” (受到一些的管控)的静态资源如 image, css, js 文件, 当第二次请求被缓存过的资源时候,会通过校验两个字段 Expires 和 Cache-Control 的max-age字段(注意,Expires 是 http1.0 的产物, Cache-Control 则是

    2023年04月19日
    浏览(35)
  • 浏览器缓存原理

    使用 HTTP 缓存的好处 :通过复用缓存资源,减少了客户端等待服务器响应的时间和网络流量,同时也能缓解服务器端的压力。可以显著的提升网站的应用性能。 HTTP 缓存策略分为两种 :强制缓存、协商缓存。 强制缓存 浏览器缓存没有过期的时候可以直接决定使用缓存。 强

    2023年04月27日
    浏览(38)
  • 浏览器缓存机制

    什么是浏览器缓存 浏览器缓存就是浏览器根据 url 第一次访问网站之后,将网站的 html、css、js、图片等文件复制一份保留到浏览器中,当你二次访问这个 url 的网站时,如果网站没有明确表示有更新时,浏览器直接在缓存中查找内容,不会再次请求网页内容,只有网页明确表

    2024年02月04日
    浏览(51)
  • 前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

    掘金1:浏览器缓存 掘金2 :浏览器缓存 跟别人怎么讲,从大的说:缓存的原理是什么? 再说什么是浏览器缓存? 浏览器缓存 请求(静态资源 | 动态资源) 一、缓存是什么? 二、为什么? 浏览器是如何判断是否使用缓存的??第一次请求网页 第二次请求相同网页: 三、怎

    2024年02月12日
    浏览(55)
  • 强缓存、协商缓存(浏览器的缓存机制)是么子?

    为了减少资源请求次数,加快资源访问速度,浏览器会对资源文件如图片、css文件、js文件等进行缓存 所谓强缓存,可以理解为强制缓存的意思,即浏览器在访问某个资源时会判断是否使用本地缓存里已经存在的资源文件,使用本地缓存的话则不会发送请求到服务器,从而达

    2024年01月20日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包