Vue本地存储及用法

已于 2023-03-10 11:08:37 修改
阅读量2.5k 收藏 3
点赞数 2
文章标签： 前端 javascript 服务器 vue.js
于 2023-03-10 10:59:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70703397/article/details/129438277
版权

目录

1.本地存储是什么？

2.本地存储的应用场景

3.存储的使用

4. 练习用法

1.本地存储是什么？

        以文件的方式存储在本地，通过把数据存在浏览器中，用户不必每次都向服务器请求
获取同一个信息。在你离线时，使用本地存储的数据而不是向远端服务器上请求
数据就显得非常有用，甚至在先用户也可以从中获益。客户端存储可以通过这些
技术来实现：cookie、Local、Storage(更准确的说是“Web Storage”)

2.本地存储的应用场景

        localstorage是保存在本地 存储量比较大 而且不会 被销毁，有时候做一些跨域
操作cookie无法使用这个来做 或者缓存一些不需要提交到服务器的数据比如
我有一个弹窗 需要谈一天弹一次这种记录就可以用localstorange 

3.存储的使用

        1 存储数据
                localStorage.setltem('accessToken','Bearer'+response.data.result.accessToken)
        2 取出数据
                ocalStorage.getltem('accessToken')

        3 删除存储数据
                ocalStorage.removeltem('accessToken')

        4 更改数据
                localStorage.setltem('accessToken',更改后  +'response'.data.result.accessToken)

4. 练习用法

        首先是页面布局，通过双向绑定来获取input框的值，再将数据存储到对象里，将对象通过本地存储，存储起来，取出来之后，定义一个空数组，将对象添加到数组里，之后再将数据存储起来

小毕学习代码
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue使用localStorage存储数据的方法
12-11
本文实例为大家分享了Vue使用localStorage存储数据的具体代码，供大家参考，具体内容如下 通过下面这个案例来了解localStorage的基本使用方法。 输入评论人、评论内容，点击发表评论，评论数据将保存到localStorage中，并刷新评论列表。 1.先组织出一个最新评论数据对象  var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象，保存到localStorage中  1.localStorage只支持存字符串数据,保存先调用JSON.stringify转为字符串 2.
vue调用接口+本地存储：每日笑话
10-17
调用接口，获取数据，使用vue本地存储保存数据 实现效果：每日只有三个笑话，当天无论怎么刷新，当天笑话不发生改变，日期改变则更新笑话。
vue本地存储
huai42717的博客
10-24 1331
本地存储
第十五章：Electron-Vue 操作本地数据库nedb，2024年最新Web前端面试算法题
最新发布
2301_82242638的博客
04-11 717
/数据库使用/* 其它代码 */1、 增加数据//增加数据if (!console.log(“不能为空”);return;});},2、更新数据//更新数据if (err) {return;},3、删除部分数据//删除一条数据if (err) {return;});},4、删除所有数据//删除所有数据if (err) {return;});},5、条件查找数据//条件查找数据。
vue项目storage本地存储
sinat_39648402的博客
07-30 8320
1.在model文件夹下面新建一个storage.js const storage = { set(key,value){ sessionStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(sessionStorage.getItem(key)); }, getForIndex(index){ return sessionStorage.key(index) .
vue动态配置启动或打包时的参数、读写文件、设置、readFileSync、writeFileSync、replace、process、toString、join
04-17 1700
vue动态配置(设置)运行与打包参数、读写文件、readFileSync、writeFileSync、replace、process、toString、join
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
游坦之的博客
04-30 1万+
存储的四个方法 1、存储 localStorage.setItem(key, value); key和value都必须是字符串。 例如：存储数据 【效果图】 【问】如果要传一个对象该怎么办？ 如果直接将对象作为value放进去，会出现这样的现象 用JSON（JSON.stringify() ）转换一下，将对象先转化成字符串，如下 然后就可以将对象，存进去了 2、读取localStorage.setItem(key） 例如：读取存储的数据 【效果图】...
Vue中如何进行本地存储（LocalStorage）
stormjun的博客
09-21 6152
本地存储（LocalStorage）是浏览器提供的一种机制，允许Web应用程序在用户的浏览器中存储数据。这些数据以键值对（key-value pairs）的形式存储，并且可以在浏览器会话之间保持持久性。本地存储是基于域名的，这意味着数据将与特定域名相关联。存储在LocalStorage中的数据在浏览器关闭后仍然保留，直到被明确删除。浏览器为每个域名提供了一定的LocalStorage存储容量，通常为5-10MB。超出容量限制时，需要谨慎管理存储数据。
vuex如何存储数据、获取数据、以及数据的持久化
m0_65069237的博客
12-09 3110
第一步，在vuex中matations模块中加入存储数据的方法第二步，在需要提交数据的页面使用this.$store.dispatch方法通过点击事件submitForm即可将数据传入vuex中。点击跳转到About页面。
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
一个非常Cool的人
12-12 3716
介绍到了使用浏览器进行本地存储，自定义事件的绑定、触发与销毁，全局事件总线的使用及原理，还有如何使用nextTick小技巧。每一个知识点都从基本概念说起，一步一步进行剖析，结合代码实例彻底搞明白。
Vue_localStorage本地存储和本地取值解决方法。
IAmNotChangAn的博客
12-28 6706
Vue怎么实现存储和取值？
详解vue中localStorage的使用方法
12-09
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开...
vue-ls：Vue插件，用于Vue上下文中的本地存储，会话存储和内存存储
02-02
语言 Vue插件可用于Vue上下文中的本地存储，会话存储和内存存储jsFiddle示例 安装CDN 推荐： : ，它将在发布到npm时立即反映最新版本。 您也可以在浏览npm软件包的源代码。 也可以在或，但是这两个服务需要花费一些...
本地存储localStorage用法详解
08-29
主要为大家详细介绍了本地存储localStorage的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-intl:用于 FormatJS 内化和本地化的 Vue 插件
05-29
这个存储库已经被归档，支持现在托管 vue-intl 插件。 用于 FormatJS 内化和本地化的 Vue 插件 安装 npm install vue-intl 用法 // assuming CommonJS var Vue = require ( 'vue' ) ; var VueIntl = require ( '...
vue TodoList 使用本地储存进行修改
MCCLS的博客
07-23 313
之前做的TodoList当页面刷新会导致数据丢失 那什么时候进行数据的存储？如果对每个可以修改数据的控件进行编写逻辑显然,太麻烦 所以只要当todos改变了就重新存储一份localS0torage因为相同的key会被覆盖 读取数据直接写在data属性后即可 修改一般写在监视中 深度监视问题由于会todos属性中为一个对象集所以需要深度监视 但是会发现不完善,如果一开始没数据 localStorage读出来的就是null然后JSON.parse后还是null,所以此时todos.
vue+cordova混合开发APP中向手机本地存储/读取文件
白云苍狗
12-30 2073
vue+cordova混合开发APP中向手机本地存储/读取文件 利用cordova-plugin-file 存储/读取手机文件 JSON数据包分割后在合并
vue存储数据的几种方法（Vuex与本地存储）
热门推荐
DW14687的博客
06-28 3万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 vue存储数据的几种方法（Vuex与本地存储）前言一、vuex二、方式一1.创建vuex2.存入数据3.取出数据二、方式二1.创建vuex2.存入数据3.取出数据总结 前言 在浏览网页时我们有些时候需要记住一些用户选择的信息，比如登陆时我们如果选择了记住密码，那么我们下次进入该网页时就会有你上次的登陆信息。 在网站开发中，我们可能会遇到左边是列表，右边显示内容的页面，当我们切换页面再返回的时候，需要记住我们上次选择的列表项。 这个时候，我
vue中的怎么获取localStorage的信息
想快快长大的博客
08-26 1万+
比如我登录完了 想在页面上面显示登录的名字 那么我存储在localStorage的信息怎么给他显示出来呢 简单 直接上代码 在methods 定义一个方法 loadComments() { var list = localStorage.getItem("username"); this.username = list; } 意思是localSt...
用本地存储localhos
05-31
我认为您可能想问的是本地存储localstorage的使用方法。使用本地存储localstorage，可以将数据存储在用户浏览器端，以便在用户下次访问该网站时可以快速获取之前存储的数据。 以下是使用本地存储localstorage的示例代码： 1. 存储数据 使用localStorage.setItem()方法将数据存储到本地存储中，例如： ``` localStorage.setItem('key', 'value'); ``` 其中，'key'是您存储的数据的键名，'value'是您要存储的数据的值。 2. 获取数据 使用localStorage.getItem()方法获取本地存储中的数据，例如： ``` var myValue = localStorage.getItem('key'); ``` 其中，'key'是您之前存储的数据的键名，'myValue'是获取到的数据的值。 3. 删除数据 使用localStorage.removeItem()方法从本地存储中删除数据，例如： ``` localStorage.removeItem('key'); ``` 其中，'key'是您要删除的数据的键名。 需要注意的是，本地存储的数据是以字符串的形式存储在浏览器中，如果需要存储其他类型的数据，需要将其转换为字符串类型。同时，由于本地存储是基于浏览器的，不同的浏览器可能存在兼容性问题，需要谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小毕学习代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值