vue中 localStorage的使用方法（详解）

最新推荐文章于 2025-07-03 15:55:31 发布
原创 最新推荐文章于 2025-07-03 15:55:31 发布 · 3.9w 阅读 · 58 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#localStorage #html本地储存

本文介绍了在Vue项目中如何利用HTML5的localStorage特性进行本地数据存储，包括数据的存储、读取、删除及更新操作，并提醒开发者注意隐私模式下localStorage的不可读性和对json数据的正确处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

(1).储存数据localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)

(2).取出数据

localStorage.getItem('accessToken')

(3).删除储存数据

 localStorage.removeItem('accessToken')

(4).更改数据

localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)

使用时有两点需要注意过的地方：

  • localStorage在浏览器的隐私模式下面是不可读取的。
  • localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。
  • localStorage不能被爬虫抓取到
详解Vue中localstorage和sessionstorage的使用
大熊的博客
03-29 1万+
1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用2. 解决办法封装stor...
详解vue中localStorage的使用方法
12-09
什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 2.localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是: 当我们首次访问设置Cookie的页
Vue2的localStorage的监听变化，终于被我抓到了！
最新发布
xt0124的博客
07-03 196
Vue2的localStorage的监听变化，被我抓到拉！！！
Vue.js使用localStorage保存读取数据，并实现深度监视功能（同理可用于数据库保存读取）
美奇软件开发工作室
02-16 1237
一、操作localStorage的工具类 storageUtils.js /* * 向localStorage中存储数据的工具模块 * （export表示向外暴露方法） */ export default { /* * 读取数据 * key：数据对象的key */ readData (key) { return JSON.parse(localStora...
VUE window本地保存Local Storage
qq_34631220的博客
07-08 1156
保存：window.localStarage.setItem('名','值'); window.localStorage.setItem('token',backdata.data[2]); 查询：window.localStarage.getItem('名'); window.localStorage.getItem('token'); 删除：window.localStarage.clear('名'); window.localStorage.clear('token'); 删除所有：window.l.
localStorage 用法
lylyyg的专栏
04-10 581
    locaStorage 是 Storage 的实例，有 setItem(name, value) 、getItem(name)、removeItem(name)、key(index)、.操作符、clear()方法， 还可以根据 length 属性获取 localStorage 中有多少键值对。    Storage 类型只能存储字符串，非字符串的数据在存储之前会被转换成字符串。    因此...
vue 界面刷新数据被清除 localStorage的使用详解
10-18
本文将详细介绍如何在Vue项目中使用`localStorage`。 `localStorage`是Web Storage API的一部分，它提供了一个在浏览器端持久化存储数据的方法。与Cookie相比，`localStorage`具有更大的存储容量（通常为5MB），...
vuex存储数组(新建，增，删，更新)，并存入localstorage定时删除
qq_23858785的博客
04-25 3795
vuex存储数组(新建，增，删，更新)并存入localstorage，定时删除
VUE学习07--VUE使用localStorage和mounted实现toDoList（待办事项新增，切换，删除）
stalin_的博客
07-09 796
上一篇文章我们讲了如何实现一个简单的toDoList，可以新增，删除，修改状态的待办事项。 但是它还不够完善，比如我们输入了几个项目进去，如果页面刷新或者重新进入，刚才添加或者删除的项目就没有了，为了能够 实现永久保存，我们可以利用Html5的一个缓存机制localStorage加上vue的mounted来实现。 一、localStorage用法： 1.存储/更新数据 localStorage.setItem('key',value) 2.获取数据 localStorage.getI...
vue -关于浏览器localstorge数据定期清除的实现
m0_53253682的博客
01-08 424
在用户登录时，将用户信息存入localstorge的同时，将当前时间作为时间戳也保存在localstorge中，然后需要验证的位置设置一个定时器，定时扫描时间戳状态：获取当前时间戳，然后减去之前存的时间戳，如果两者差值超过一定范围（过期时间/），则清除localstorge缓存即可。用户登录时的信息存在了localstorge中，但它会一直存在。一般来说，我们希望这个数据能够定期被清除掉，以下一个定时清除的实现。2.页面加载时，创建定时器，执行定时扫描，页面销毁前，清除定时器。
vue项目关闭浏览器清空localStorage中存储的数据
tt1234561009的博客
06-29 4455
上面大致描述了localStorage的优缺点，下面我们一起来看下，有的业务场景中当关闭浏览器窗口时怎么实现清空localStorage中的数据。实现思路大致就是给项目添加一个监听器，在项目销毁前移除localStorage中的数据，一般这个监听写在App.vue文件中。浏览器兼容性不全面，IE浏览器在IE8以上的才支持（影响不大）数据永久存储，如果没有手动清空，数据会一直保存在浏览器缓存中。数据存储大小5MB，通常以json格式的字符串保存。可以跨页面存储数据，实现数据共享。
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
热门推荐
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
session、cookie、WebStorage（sessionStorage，localStorage）区别
huhm_evget的博客
04-21 790
cookie 天生就是最适合做认证，他们最大的区别是：每次 request 都会自动在 header 中带上所有的 cookie。 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 cookie机制 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中
Vue入门(四)LocalStorage的使用
fajing_feiyue的博客
11-27 5659
前言 这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。 案例 一、LocalStorage 的作用 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在
Vue个人学习笔记01
时光乱了谁的心的博客
08-01 1022
一、构建Vue项目 1、已安装NodeJS和npm，可通过cmd命令行中输入“node -v”和“npm -v”来测试是否都已安装成功。 2、安装Vue的脚手架工具，npm install -g vue-cli。 3、创建项目 vue init webpack my-project //新建文件夹，my-project为我自己的项目文件名 cd my-project //打开对应文件夹 ...
vue中使用localStorage存储信息
一个超爱喝可乐的web前端攻城狮
03-11 4333
vue中使用localStorage存储信息 一 什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage; sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载; localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在的; 二 使用方法
详解vue中localstorage和sessionstorage的使用
08-23
要在Vue中使用LocalStorage和SessionStorage，你可以按照以下步骤进行： 1. 首先，你需要在Vue组件中导入LocalStorage和SessionStorage方法。你可以使用`import`语句将它们导入到你的组件中。 2. 接下来，你可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值