掌握VUE中localStorage的使用

文章目录

    • 🍁localStorage的使用
      • 🌿设置数据
      • 🌿获取数据
      • 🌿更新数据
      • 🌿删除数据
    • 🍁代码示例
    • 🍁使用场景
    • 🍁总结

localStorage是一种Web浏览器提供的本地存储机制,允许开发者在用户浏览器中存储和检索数据。它提供了一种简单的键值对的存储模式,用于在浏览器会话期间持久保存数据。

🍁localStorage的使用

在 Vue.js 中使用 localStorage 是一种常见的方法,用于在浏览器中存储和获取数据。localStorage 是浏览器提供的一种持久化存储机制,可以将数据存储在客户端,即使用户关闭了浏览器,数据仍然可以保留。

以下是在 Vue.js 中使用 localStorage 的基本步骤:

🌿设置数据

在 Vue 组件中,可以使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中。例如:

localStorage.setItem(‘username’, ‘John’);
这样就将 ‘John’ 存储到了名为 ‘username’ 的 localStorage 键中。

🌿获取数据

可以使用 localStorage.getItem(key) 方法从 localStorage 中获取存储的数据。例如:

var username = localStorage.getItem(‘username’);
console.log(username); // 输出 ‘John’
这样就可以从名为 ‘username’ 的 localStorage 键中获取存储的值。

🌿更新数据

如果需要更新 localStorage 中的数据,只需重新使用 localStorage.setItem(key, value) 方法进行设置。例如:

localStorage.setItem(‘username’, ‘Jane’);
这样就将名为 ‘username’ 的 localStorage 键的值更新为 ‘Jane’。

🌿删除数据

如果需要从 localStorage 中删除某个键值对,可以使用 localStorage.removeItem(key) 方法。例如:

localStorage.removeItem(‘username’);
这样就会从 localStorage 中删除名为 ‘username’ 的键值对。

需要注意的是,localStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据,可以使用 JSON.stringify() 将数据转换为字符串进行存储,使用 JSON.parse() 将字符串转换为相应的数据类型进行获取。

🍁代码示例

<!DOCTYPE html>
<html>
<head><title>localStorage示例</title>
</head>
<body><h1>localStorage示例</h1><input type="text" id="nameInput" placeholder="输入你的名字"><button onclick="saveName()">保存名字</button><div id="nameDisplay"></div><script>// 从localStorage获取保存的名字并显示在页面上function displayName() {let savedName = localStorage.getItem('name');if (savedName) {document.getElementById('nameDisplay').innerText = '你的名字是: ' + savedName;} else {document.getElementById('nameDisplay').innerText = '尚未保存名字';}}// 保存名字到localStoragefunction saveName() {let nameInput = document.getElementById('nameInput');let name = nameInput.value;if (name) {localStorage.setItem('name', name);displayName();nameInput.value = '';}}// 页面加载时显示已保存的名字displayName();</script>
</body>
</html>

这个示例包含了一个简单的HTML页面,其中包含一个文本输入框和一个按钮。通过在输入框中输入名字并点击按钮,名字将保存到localStorage中,然后显示在页面上。

在JavaScript代码部分,定义了两个函数:

displayName() 函数用于从localStorage获取保存的名字并在页面上显示出来。
saveName() 函数用于将输入框中的名字保存到localStorage中,并调用 displayName() 函数来更新页面上显示的名字。
此外,在页面加载时,会调用 displayName() 函数来显示已保存的名字(如果有的话)。

🍁使用场景

LocalStorage在Web开发中有很多实际的应用场景。下面是一些常见的应用场景:

  • 用户偏好设置:可以使用LocalStorage存储用户的偏好设置,比如主题颜色、语言选择等。这样用户在下次访问时,可以自动加载他们之前的偏好设置。

  • 表单数据的存储:当用户在表单中输入数据时,可以将数据存储在LocalStorage中,以防止数据丢失。这样用户在重新加载页面或者刷新页面时,之前输入的数据仍然会保留。

  • 用户登录状态的保存:当用户进行登录操作时,可以将用户的登录状态保存在LocalStorage中。这样用户在浏览站点的其他页面时,仍然可以保持登录状态,而无需每次都重新登录。

  • 本地缓存数据:如果你的应用需要频繁请求一些静态数据,可以将这些数据存储在LocalStorage中,以减少网络请求并提高应用的响应速度。

尽管LocalStorage非常有用,但也有一些需要注意的限制。由于LocalStorage是存储在用户的浏览器中,所以它的存储空间是有限的。不同浏览器的存储空间限制大小不同,通常为5MB到10MB左右。超过这个限制时,可能会导致添加新数据失败。

另外,LocalStorage是域名绑定的,即每个域名下的LocalStorage是相互隔离的。这意味着一个网站无法访问另一个网站的LocalStorage数据。这也是保护用户隐私的一种机制。

🍁总结

LocalStorage是一种在Web浏览器中存储和获取数据的本地存储机制。它可以方便地存储和获取数据,而无需每次都发送请求到服务器。在Web开发中,LocalStorage有很多实际的应用场景,比如存储用户偏好设置、表单数据、登录状态等。但需要注意的是,LocalStorage有存储空间限制,并且是域名绑定的,需要注意数据的隔离和安全性。


🏫博客主页:魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中ReentrantLock的实现原理是什么?

ReentrantLock 的实现原理主要涉及到两个关键概念&#xff1a;同步器&#xff08;Sync&#xff09;和 AQS&#xff08;AbstractQueuedSynchronizer&#xff0c;抽象队列同步器&#xff09;。 ReentrantLock 使用 AQS 来实现可重入锁的机制。AQS 是 Java 并发包中的一个抽象基类…

周星驰 互联网3.0 团队下个月将上线独立 App

2023年12月7日&#xff0c;新浪科技报道指出&#xff0c;周星驰旗下的互联网3.0团队透露&#xff0c;Moonbox&#xff0c;这家周星驰创立的互联网3.0初创公司&#xff0c;计划在明年1月份完成Moonbox App的上线&#xff0c;届时该应用将免费向用户提供服务。 目前&#xff0c;…

C现代方法(第25章)笔记——国际化特性

文章目录 第25章 国际化特性25.1 <locale.h>: 本地化25.1.1 类项25.1.2 setlocale函数25.1.3 localeconv函数 25.2 多字节字符和宽字符25.2.1 多字节字符25.2.2 宽字符25.2.3 Unicode和通用字符集25.2.4 Unicode编码25.2.5 多字节/宽字符转换函数25.2.6 多字节/宽字符串转…

Academic accumulation|行政管理方向的文章

一、评西方的“新公共管理”范式 文献来源&#xff1a;[1]陈振明.评西方的“新公共管理”范式[J].中国社会科学,2000(06):73-82207. 下载链接&#xff1a;https://pan.baidu.com/s/1M1jDT-5tsJ0ES46j4pb7Cg 提取码&#xff1a;mj54 在当代西方政府改革浪潮的冲击下 ,世纪之交的…

zotero关闭翻译自动创建标签

zotero中文社区&#xff1a;https://plugins.zotero-chinese.com/#/

代码迁移到gltlab仓库,包含全部分支和提交记录

老仓库所有分支都完整拉取 git clone --mirror 原仓库地址文件名&#xff1a;xxx.git 进入下载的目录&#xff0c;设置新的仓库地址 git remote set-url origin 新仓库地址推送到新仓库 git push -f origin --mirror问题一&#xff1a;remote: GitLab: The default branch …

Jmeter用于接口测试中,关联如何实现

Jmeter用于接口测试时&#xff0c;后一个接口经常需要用到前一次接口返回的结果&#xff0c;应该如何获取前一次请求的结果值&#xff0c;应用于后一个接口呢&#xff0c;拿一个登录的例子来说明如何获取。 1、打开jmeter, 使用的3.3的版本&#xff0c;新建一个测试计划&#…

acme.sh自动配置免费SSL泛域名证书并续期(Aliyun + Debian + nginx)

acme.sh自动配置免费SSL泛域名证书并续期&#xff08;Aliyun Debian nginx&#xff09; 以前使用Certbot自动配置SSL证书&#xff0c;需要安装snap管理器再安装Certbot&#xff0c;期间还要去找AliDNS脚本&#xff0c;比较麻烦。如果不想如此&#xff0c;推荐使用acme.sh自动…

maven学习笔记总结

目录 一、maven简介 二、GAVP属性 三、基于 IDLE 的 Maven 工程创建 1&#xff09;java标准工程&#xff08;Javase&#xff09;的创建 2&#xff09;java企业工程&#xff08;Javaee&#xff09;的创建 a&#xff09;手动创建 b&#xff09;插件方式创建&#xff08;fil…

数据结构与算法(六)分支限界法(Java)

目录 一、简介1.1 定义1.2 知识回顾1.3 两种解空间树1.4 三种分支限界法1.5 回溯法与分支线定法对比1.6 使用步骤 二、经典示例&#xff1a;0-1背包问题2.1 题目2.2 分析1&#xff09;暴力枚举2&#xff09;分支限界法 2.3 代码实现1&#xff09;实现广度优先策略遍历2&#xf…

力扣题:字符的统计-12.4

力扣题-12.4 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;657. 机器人能否返回原点 解题思想&#xff1a;进行统计即可 class Solution(object):def judgeCircle(self, moves):""":type moves: str:rtype: bool""&qu…

GeoPandas初体验:它是什么,我用它展示一下shp矢量数据

GeoPandas 是一个开源的 Python 库&#xff0c;用于处理地理空间数据。它扩展了 Pandas 这个流行的 Python 数据操作库&#xff0c;增加了对地理数据类型和操作的支持。GeoPandas 结合了 Pandas、Matplotlib 和 Shapely 的功能&#xff0c;提供了一个易于使用且高效的工具&…

c语言实例:计算并输出一个整数数组的平均值

大家好&#xff0c;今天给大家介绍一个c语言实例&#xff1a;计算并输出一个整数数组的平均值&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 以下是一个使用C语言实现的实例&am…

Day18——JDK新特性

1.JDK8的新特性 1.1 Lambda表达式 1.1.1 举例 public class LambdaTest {Testpublic void test1(){Runnable r1 new Runnable() {Overridepublic void run() {System.out.println("test1");}};r1.run();//Lambda表达式的写法Runnable r2 () ->{System.out.pr…

怎么将用户引流到你的私域中?

微信私域运营是一种利用微信平台建立与用户深度联系的营销方式&#xff0c;可在私域中触达并服务用户。 那么如何将在将用户引流至你的私域中呢&#xff1f; 可以从以下几个小方法入手。 ①打造一个吸引人的个人品牌形象非常重要。在社交媒体上展示真实、独特、专业的一面&a…

喜讯!云起无垠上榜《成长型初创企业推荐10强》

近期&#xff0c;由中国计算机学会抗恶劣环境计算机专业委员会、信息产业信息安全测评中心和安全牛联合发起的第十一版《中国网络安全企业100强》榜单正式发布。在这份备受关注的榜单中&#xff0c;云起无垠凭借其创新的技术能力&#xff0c;荣登《成长型初创企业推荐10强》榜单…

网络知识学习(笔记三)(传输层的TCP)

前面已经介绍了传输层的UDP协议的报文以及一下相关的知识点&#xff0c;本次主要是传输层的TCP协议&#xff0c;包括TCP报文的详细介绍&#xff1b;可靠传输、流量控制、拥塞控制等&#xff1b;建立连接、释放连接。 一、TCP基本知识点介绍 1.1、TCP协议的几个重要的知识点 …

网安领域含金量最高的证书有哪些?看这1篇就足够了!

文章目录 一、前言二、CISP三、CISAW四、NISP五、为什么很多人考不下来 一、前言 现在想找网络安全之类的工作&#xff0c;光有技术是不够的&#xff0c;还得有东西证明自己&#xff0c;网安三大敲门砖&#xff1a;CTF、漏洞证明和专业证书。 对于CTF的话只是少数人能参加的&…

12月08日,每日信息差

以下是2023年12月08日的12条信息差 第一、英国大宗商品经纪商Marex准备在美国上市 第二、阿里云通义千问登顶HuggingFace排行榜。据了解&#xff0c;HuggingFace的开源大模型排行榜收录了全球上百个开源大模型&#xff0c;测试维度涵盖阅读理解、逻辑推理、数学计算、事实问答…

Gateway:微服务架构中的关键组件

Gateway&#xff1a;微服务架构中的关键组件 在微服务架构的世界中&#xff0c;Gateway&#xff08;网关&#xff09;扮演着至关重要的角色。它不仅作为流量的入口&#xff0c;还提供路由、鉴权、监控等多种功能。本博客将详细介绍Gateway的概念、功能以及如何在实际项目中使用…