Vue54-浏览器的本地存储webStorage

于 2024-06-16 23:12:30 发布
阅读量276 收藏 4
点赞数 3
分类专栏： VUE2 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31532983/article/details/139727775
版权

一、本地存储localStorage的作用 

二、本地存储的代码实现

2-1、存储数据 

注意：

localStorage是window上的函数，所以，可以把window.localStorage直接写成localStorage（直接调用！）

默认调了p.toString()方法。

2-2、读取本地存储

读取一个没有的key，出来的是：null

JSON.parse(null)的结果，也是null！！！ 

2-3、删除本地存储

2-4、清空本地存储

清空所有的本地存储！

2-5、localStorage清除数据的两种情况

1、调API接口

2、用户主动清除缓存！

三、sessionStorage会话存储

所有的API和localStorage一样！ 

浏览器一关，就没有了！

 

四、小结

ruleslol
关注
专栏目录
Vue学习（十四）本地存储webStorage
qq_29107721的博客
06-18 431
存储内容大小一般在5MB左右（存储的key和value都是String的值）,浏览器把数据存在本地或者会话中
Vue webStorage 浏览器本地存储数据（附项目实战案例！）
Python+大数据+数据分析+自动化+Vue组件开发
06-28 1195
前言 前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 公众号后台回复：todo，即可获得项目完整源码 基础数据是硬编码在代码里的，相当于是写死在代码中，具体代码内容如下（核心代码片段）。 App.vue文件 export default {    //给当前组件命名为:App    name:'App',    //注册引入的子
Vue CLI 本地存储 自定义事件
suqi_123123的博客
04-27 917
1. Vue实例中的事件在Vue实例中，我们可以使用$emit方法触发自定义事件，然后在父组件中使用v-on指令监听并处理这些事件。这种方式适用于简单的组件通信场景，但对于跨越多个组件的通信可能显得有些繁琐。EventBus是一种简单的事件订阅/发布系统，可以在Vue应用中实现组件之间的通信。通过创建一个全局的EventBus实例，我们可以在任何组件中触发和监听自定义事件。这种方式适用于较为复杂的组件通信场景，但需要注意全局事件可能导致代码维护难度增加。3. Vuex中的事件。
如何在Vue3中使用本地存储localStorage保存数据？
最新发布
有我更精彩的博客
06-11 2989
是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与不同，中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得成为持久化数据的理想选择，如用户设置、购物车信息等。Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用来保存数据。在这篇博客中，我们探讨了如何在 Vue3 中使用。
Vue项目清理本地缓存并删除node_modules
m0_60862802的博客
07-24 3102
【代码】Vue项目清理本地缓存并删除node_modules。
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
一个非常Cool的人
12-12 3878
介绍到了使用浏览器进行本地存储，自定义事件的绑定、触发与销毁，全局事件总线的使用及原理，还有如何使用nextTick小技巧。每一个知识点都从基本概念说起，一步一步进行剖析，结合代码实例彻底搞明白。
js之浏览器本地存储webstorage
我心坚持
02-14 1446
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、 webstorage分为两个存储：localStorage和sessionStorage。 存储大小根据浏览器的不同，容量也不同，一般是5M左右。 是window自带的语法，以键值对的形式存储。 一、localStorage： locaStorage名字叫本地存储，能够长久的保存你的本地数据，有四个API，setItem\getItem\removeItem\clear 1、setItem：设置数据 <body> <di
Vue项目添加动态浏览器头部title的方法
10-18
在使用这些Web Storage API时，我们可以存储默认的标题，或者在没有网络连接的情况下，作为本地持久化存储的备用方案。 最后，文章提供了一个源码地址，有兴趣的开发者可以下载或查看源码，以便更深入地了解如何在...
vlf:来自localForage.vue-localForage或vlf的Vue插件
05-02
localForage通过将异步存储（IndexedDB或WebSQL）与简单的localStorage的API一起使用来改善Web应用程序的脱机体验。 localForage在不支持IndexedDB或WebSQL的浏览器中使用localStorage。 请参阅[有关详细的兼容性...
vue2项目页面关闭需要清空所有本地存储信息
weixin_69677630的博客
12-12 2255
vue2项目页面关闭需要清空所有本地存储信息
vue 清缓存
m0_56325569的博客
11-04 2349
mounted(){ // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据 window.onbeforeunload = function (e) { var storage = window.localStorage; storage.clear() } } ...
vue 关闭浏览器，清空localStorage
七七的博客
07-19 2468
vue 关闭浏览器，清空localStorage
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
Vue_localStorage本地存储
热门推荐
大脸猫~
06-27 4万+
html 的localStroage 可以将用户输入的信息存储在本地浏览器中 在控制台输入：window 可以看到window对象的属性和方法 //设置localStroage值 localStorage.setItem（'username','zhangsan'）; //获取localStroage值 localStorage.getItem（'username'）; ==&amp;gt;zhang...
Vue项目清理本地缓存并删除node_modules （清除不掉揍我）
New_Wang的博客
11-09 1万+
在linux系统下，清缓存，删除node_modules // 清理缓存 npm cache clean --force // 执行递归删除node_modules文件夹 rm -rf node_modules // 删除包版本锁 rm -rf package-lock.json // 安装npm npm install 在windows系统下，清缓存，删除node_modules 法一：利用 powershell 执行（推荐，速度快，秒删） // 清理缓存 npm cache clean..
在vue中，localStorage本地存储应用。
沿华的博客
01-12 1万+
1、先存在localStorage里面。 localStorage.setItem('indexUrl','#/IndexA'); 2、在用到的时候，获取数据 //获取本地 this.indexUrl = localStorage.getItem('indexUrl');
VUE 浏览器关闭时清空localStorage
S_mile1992的博客
12-05 4258
1. 概述 1.1 说明 vue项目中，为了解决页面刷新时vuex数据丢失问题，使用localStorage进行存储对应的vuex数据(判断对应localStorage是否为空，不为空则为vuex中数据进行赋值)，而localStorage的存储时间为长久存储，故为了数据安全则需在浏览器关闭时进行清空存储。 1.2 条件与思路 1.vue项目对应的单个网页刷新数据不丢失 --...
vue store本地化存储
09-08
Vue中的本地存储通常使用浏览器提供的Web Storage API，包括localStorage和sessionStorage。这些存储方式允许你在浏览器中存储和访问数据，以便在不同页面或刷新后保留数据。 在Vue中，你可以使用Vue插件vue-localstorage或vuex-persistedstate来简化本地存储的使用。 1. 使用vue-localstorage插件： - 首先，安装插件：`npm install vue-localstorage` - 在main.js文件中导入和使用插件： ``` import VueLocalStorage from 'vue-localstorage' Vue.use(VueLocalStorage) ``` - 在组件中使用本地存储： ``` // 设置值 this.$localStorage.set('key', value) // 获取值 let value = this.$localStorage.get('key') // 移除值 this.$localStorage.remove('key') ``` 2. 使用vuex-persistedstate插件： - 首先，安装插件：`npm install vuex-persistedstate` - 在store/index.js文件中导入和使用插件： ``` import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [ createPersistedState() ] }) ``` - 这将自动将store中的数据保存到localStorage，并在页面刷新后重新加载。 通过使用这些插件，你可以轻松地在Vue应用程序中实现本地化存储。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值