前端生存之路【localStorage的用法】

最新推荐文章于 2025-09-17 11:07:13 发布
最新推荐文章于 2025-09-17 11:07:13 发布
阅读量328 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuoliku/article/details/110471760

localStorage 持久化的存储，不会因为界面的刷新或者重启浏览器而消失，除非清除缓存

用途【vue】
vueX会因为界面的刷新而丢失数据，通过localStorage存储可以避免
在这里插入图片描述
通过 "名/键"的方式存储在浏览器中

使用

localStorage.setItem('fontSize', 15)
localStorage.getItem('fontSize')
存放对象 以JSON格式存放  不受页面刷新影响
localStorage.setItem
最低0.47元/天 解锁文章
cookie、sessionStorage和localStorage的区别（详细）
微微的猪食小窝
11-13 1593
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
前端缓存策略：前端状态管理中的缓存技术应用
AI架构全栈开发实战笔记
05-18 501
本文旨在为前端开发者提供一套完整的缓存技术应用指南，特别是在状态管理场景下的缓存策略实现。我们将覆盖从基础概念到高级应用的完整知识体系，包括内存缓存、持久化缓存、缓存失效策略等核心技术。文章首先介绍缓存技术的基本概念，然后深入探讨在前端状态管理中的具体应用，接着通过实际案例展示实现细节，最后讨论未来发展趋势和挑战。前端缓存：在前端环境中存储数据副本以提高访问速度的技术状态管理：对应用数据状态进行集中管理和维护的机制缓存命中率：请求数据时在缓存中找到的比例：缓存数据的生存时间智能化缓存。
前端本地存储之LocalStorage
weixin_54203047的博客
10-29 3240
LocalStorage 是浏览器提供的一种 Web 存储形式，它允许 Web 应用程序将数据本地存储在用户的浏览器中，并且没有过期日期。在这里，即使您关闭浏览器选项卡/窗口，存储的数据也将保持可用。请注意，存储在 LocalStorage 中的数据仅保留在用户用于访问站点的设备上的浏览器中。因此，如果用户稍后使用不同的浏览器或在另一台设备上重新访问同一站点，他们将无法访问存储的数据。
前端localStorage使用
QDzzzhy
04-29 5276
何为localStorage? 在html5中,新增了localStorage和sessionStorage来实现本地存储,它们统称为web Storage.目的是为了解决cookie存储空间不足的问题.这里笔者只提及localStorage的使用 localStorage的优势和不足 优势 存储空间的扩大(一般为5M) 没有时间限制,若不手动删除的话可以永久存储 不足 浏览器大小规范不...
localstorage 必知必会
最新发布
m0_57545130的博客
09-17 1008
LocalStorage是HTML5提供的Web存储机制，用于在浏览器中以键值对形式存储数据。它具有持久化（数据长期保存）、容量较大（5-10MB）和同源限制等特点。核心API包括setItem存储数据、getItem读取数据、removeItem删除数据等。常见应用场景包括保存用户设置、表单数据暂存和API数据缓存。使用时需注意容量限制、数据安全（不存储敏感信息）、跨浏览器兼容性等问题。相比Cookie和SessionStorage，LocalStorage更适合存储持久化的小型数据，但需防范XSS攻击风
【前端】localStorage 用法及使用注意事项
热门推荐
michiko98的博客
06-14 1万+
localstorage
localStorage详细总结
weixin_30826761的博客
09-19 311
一、localStorage简介： 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与局...
浏览器中的三种存储Cookie，Session，LocalStorage
qq_41708308的博客
05-08 2153
开发工具与关键技术：工具：MyEclipse 10 技术：Java 作者：范子超  撰写时间：2019-05-06 Cookie   Cookie储存在客户端，由用户自己销毁   Cookie：客户端信息存放对象，可以把用户的信息保存在用户的本地，不必总是访问服务器   Cookie用于保存客户浏览器请求服务器页面的请求信息，也可以用它保存非敏感性的内容。保存时间可以根据需要设置。如果没有设置C...
web前端工程师 高频面试题
06-25
15. **cookie、sessionStorage和localStorage**：存储用户数据的方式，区别在于存储量、生存期和作用域。 16. **GET与POST请求**：GET用于获取资源，POST用于提交数据，GET安全性较低，POST更稳定。 17. **new操作符...
前端学习。localstorage
xyy的博客
07-27 231
https://www.cnblogs.com/st-leslie/p/5617130.html
localstorage本地存储工具
05-24
提供get,set,del方法，快捷在本地存储数据，所有浏览器通用（不支持localstorage的，使用cookie保存）
前端数据存储全解析：localStorage、sessionStorage 与 Cookie
m0_74037439的博客
03-26 6869
Cookie 是服务器发送到用户浏览器并保存的小段文本，它会在浏览器下次向同一服务器发起请求时被携带并发送到服务器上。会话状态管理：如用户登录状态、购物车内容、游戏分数等需要记录的信息个性化设置：如用户自定义设置、主题等浏览器行为跟踪：如跟踪分析用户行为、广告投放等对于更复杂的数据存储需求，Web Storage API 和 Cookie 可能不足以满足。IndexedDB 提供了一个完整的客户端数据库解决方案：支持存储大量结构化数据支持索引和事务支持复杂查询和游标支持二进制数据（如文件、图像）
localStorage使用总结
weixin_33675507的博客
06-26 5501
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。   二、localStorag...
HTML5 localStorage使用教程
weixin_34006468的博客
07-03 167
在客户端存储数据，HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器...
前端本地存储localStorage及应用
getTheCheeseOfGod的博客
02-17 2499
localStorage
前端本地存储 cookie localStorage sessionStorage
yxrsssssss的博客
04-11 1130
1、cookie概念：Cookie是一种在客户端存储数据的机制，它将数据以键值对的形式存储在用户的浏览器中。通俗来说，客户端与服务端的交互存储的机制。Cookie 是不安全的，原因是它本身没有采用任何加密机制。通过 HTTPS 来传输 Cookie 数据是安全的，它与 Cookie 本身无关，与 HTTPS 协议相关。作用：标记一般来自服务端。ExpiresMax-AgeStrictLax应用场景：Cookie常用于存储会话标识符，以便在用户访问不同页面时保持会话状态。
前端缓存localStorage和sessionStorage
Liu_Si_Jia的博客
10-20 246
localStorage.fresh = "vfresh.org"; // 设置一个键值 var a = localStorage.fresh; // 获取键值 // API // 清空storage localStorage.clear(); //设置一个键值 localStorage.setItem("fresh", "vfresh.org"); // 获取一个键值 localStorage.getItem("fresh"); // return "vfresh.org" // 获取指定下表的
JavaScript 学习-49.localStorage前端保存数据
qq_27371025的博客
10-09 1171
localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage 存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
前端localStorage使用方法
06-13
### 使用前端 `localStorage` 保存输入框数据 在前端开发中，`localStorage` 是一种持久化的存储机制，可以用来保存用户的输入数据，并在页面刷新后仍然保留这些数据。以下是关于如何使用 `localStorage` 来保存和恢复输入框数据的详细说明。 #### 1. 保存输入框数据到 `localStorage` 当用户在输入框中填写内容时，可以通过监听输入事件（如 `input` 或 `blur`）将数据保存到 `localStorage` 中。以下是一个简单的代码示例： ```javascript // 获取输入框元素 const inputElement = document.getElementById('userInput'); // 监听输入事件，实时保存数据到 localStorage inputElement.addEventListener('input', function () { const inputValue = inputElement.value; localStorage.setItem('savedInput', inputValue); // 保存数据到 localStorage }); ``` 这段代码通过 `localStorage.setItem` 方法将输入框的值保存到 `localStorage` 中[^1]。 #### 2. 恢复输入框数据 当页面重新加载时，可以通过 `localStorage.getItem` 方法从 `localStorage` 中获取之前保存的数据，并将其重新填充到输入框中。 ```javascript // 在页面加载时恢复输入框数据 window.onload = function () { const savedInput = localStorage.getItem('savedInput'); // 从 localStorage 获取数据 if (savedInput) { document.getElementById('userInput').value = savedInput; // 将数据填充回输入框 } }; ``` 这段代码确保了即使页面刷新，用户之前输入的内容也能被恢复[^3]。 #### 3. 清除保存的数据 如果需要清除保存的数据，可以使用 `localStorage.removeItem` 或 `localStorage.clear` 方法。例如： ```javascript // 清除特定键的数据 localStorage.removeItem('savedInput'); // 清除所有 localStorage 数据 localStorage.clear(); ``` #### 注意事项 - `localStorage` 的数据是字符串形式存储的，因此在保存复杂数据类型（如对象或数组）时，需要先使用 `JSON.stringify` 转换为字符串，读取时再用 `JSON.parse` 转换回来[^2]。 - `localStorage` 的存储空间有限（通常为 5MB），并且是基于域名隔离的，不能跨域访问[^2]。 - 存储在 `localStorage` 中的数据没有过期时间，除非手动清除，否则会一直存在[^2]。 #### 完整示例 以下是一个完整的 HTML 和 JavaScript 示例，展示如何使用 `localStorage` 保存和恢复输入框数据： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LocalStorage 示例</title> </head> <body> <label for="userInput">请输入内容：</label> <input type="text" id="userInput"> <script> // 获取输入框元素 const inputElement = document.getElementById('userInput'); // 页面加载时恢复数据 window.onload = function () { const savedInput = localStorage.getItem('savedInput'); if (savedInput) { inputElement.value = savedInput; } }; // 监听输入事件并保存数据 inputElement.addEventListener('input', function () { const inputValue = inputElement.value; localStorage.setItem('savedInput', inputValue); }); </script> </body> </html> ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值