JS的本地保存localStorage、sessionStorage用法总结

最新推荐文章于 2025-05-23 11:29:09 发布
最新推荐文章于 2025-05-23 11:29:09 发布
阅读量4.5w 收藏 22
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 大前端爬坑之路 文章标签： JS的本地保存 localStorage sessionStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/71439104
这篇博客总结了HTML5中的localStorage和sessionStorage的使用，包括它们的存储方式、生命周期、浏览器兼容性以及它们之间的区别。主要讨论了它们如何用于本地数据存储，特别是在减少服务器通信和用户信息保存方面的应用。同时，文章还提到了不同浏览器和页面间的共享规则，并给出了具体的代码实现示例。

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

JS的本地保存localStorage、sessionStorage用法总结


         localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持

        为什么要掌握localStorage、和sessionStorage。

       JS中为了减少与服务器的通信，经常会用到保存的数据到本地的功能，

       例如本地用户信息保存。


      localStorage和sessionStorage的区别：


     (1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

     (2)、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

     (3)、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

   &nb

了解本专栏 订阅专栏 解锁全文 超级会员免费看
JS的本地存储- sessionStorage/localStorage/数组对象的存储方式
qq_43358004的博客
05-27 3098
JS的本地存储- sessionStorage/localStorage/数组对象存储 ❤最后有你不可错过的总结的思维导图❤ 1.特性 1）sessionStroage 1.页面刷新也不会丢失数据 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 1）localStroage 1.数据永久存储 除非手动删掉 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 2.存储 js中数据如果要存储到浏览器需要转换为数据的类型，因为浏览器只能存储进去字符串类型。 eg:
localStorage和sessionStorage区别
qac的博客
12-17 255
localStorage和sessionStorage区别 localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。 localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sess
js 本地存储（sessionStorage & localStorage）
贝la的博客
07-22 294
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="del">清空所有数据</button> &l..
JS 本地存储（localStorage和sessionStorage）
PrimaryColor
07-15 383
使用方法 localStorage和sessionStorage方法： setItem（key，value） //key为存储的键，value为存储的数据 getItem（key） //key为取数据的键。 示例： localStorage.setItem("userName","yy"); let user=localStorage.getItem("userName"); console.log(user); //结果为：yy 区别： localStorage：存储的数据当浏览器被关闭时不会被
sessionStorage 和localStorage
最新发布
yuren_xia的博客
05-23 389
是 Web Storage API 的两种客户端存储机制，它们的核心区别在于。数据仅保存在客户端，不自动发送到服务器，适合敏感度较低的非关键数据。，同时共享部分 API 和设计理念。均遵循同源策略，不同源的页面无法互相访问存储数据。
JavaScript本地存储实践sessionStorage
我的E家
11-20 1416
目录 背景回顾 sessionstorage与localStorage对比 使用注意 使用场景 vue中sessionStorage.js封装与使用 1、sessionStorage.js的封装 2、vue其他页面使用 背景简介                  HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对...
js-前端存储之sessionStorage
岂不闻
02-19 2056
sessionStorage是 Web Storage API 提供的一种客户端存储机制，用于在浏览器中保存会话级别（session-level）的数据。与localStorage不同，sessionStorage中存储的数据在用户关闭标签页或浏览器窗口时会被清除。
JS 本地存储 sessionStorage localStorage
christmassss的博客
01-16 897
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。Application中Session Storage中可以查看到存储的数据。Application中Local Storage中可以查看到存储的数据。4、只能存储字符串，可以将对象JSON.stringify)编码后存储。2、设置、读取方便、甚至页面刷新不丢失数据。2、在同一个窗口(页面)下数据可以共享。1、数据存储在用户浏览器中。
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
SessionStorage的使用方法与LocalStorage几乎一致： ```javascript // 设置 sessionStorage.setItem("mycolor", "456"); sessionStorage.mycolor = '456'; // 获取 var $color = sessionStorage.getItem("mycolor...
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时，表单数据会被转换成JSON格式并存储到localStorage中，页面加载时则会读取存储的数据填充表单。 2. ...
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
09-28
localStorage的基本使用方法如下： 1. **设置数据**：使用`localStorage.setItem(key, value)`方法，其中`key`是存储的键，`value`是对应的值。例如，将一个数组的元素存储到localStorage中： ```javascript for ...
js sessionStorage本地存储
黄大仙
08-12 1575
本地存储特性 数据存储在用户浏览器中 设置, 读取方便,甚至页面刷新数据不丢失 容量较大,sessionStorage约为5M,localStorage约为20M 只能存储字符串, 可以将对象JSON.stringify()编码后存储 window.sessionStorage 特        点 生命周期为关闭窗口 生命周期为关闭窗口 同一窗口下数据共享 以键值对形式存储 案例: html部分代...
jQuery中localStorage及sessionStorage的使用
low666的博客
05-07 4555
jQuery中localStorage及sessionStorage的使用 localStorage、sessionStorage理解 localStorage：在HTML5中，新加入的一个l特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 sessio...
jquery 和 html5 使用本地存储 localStorage 完整功能小案例demo
@必意玲
01-29 1555
1. 效果演示 2. 涉及功能知识点 添加本地存储 查询本地存储 根据 index 删除本地存储 清空本地存储 模板引擎渲染 3. 模板引擎渲染 &amp;amp;amp;lt;script id=&amp;amp;quot;localHistroy&amp;amp;quot; type=&amp;amp;quot;text/html&amp;amp;quot;&amp;amp;amp;gt; {{if list.length &amp;
JQuery和JS操作LocalStorage/SessionStorage的方法
热门推荐
一碗单炒饭的专栏
02-26 5万+
首先说一下LocalStorage和SessionStorageLocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右，各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存） 不能被爬虫爬取，不要用它完全取代URL传参 IE７及以下不支持外，其他标准浏览器都完全支持
Javascript：本地存储之localStorage
听海边涛声
06-27 4187
Javascript：本地存储之localStorage
localStorage如何实现定时（非永久）存储
王铁柱666的博客
03-02 271
本身不支持定时或过期功能，如果你想要实现定时存储（即数据在一段时间后自动删除），你需要通过其他方式来实现。以下是一个简单的方法，使用 JavaScript 的。在实际应用中，你可能需要考虑更多的错误处理和边界情况。此外，定期清理过期的数据（如使用。）应该谨慎使用，以避免不必要的性能开销。在大多数情况下，只在读取数据时检查过期时间就足够了。中的数据没有过期时间，这意味着数据会一直存在，除非被显式地删除或用户清除浏览器数据。是 Web 存储 API 的一部分，用于在用户的浏览器中存储键值对数据。
js中localStorage和sessionStorage功能
素描本里的男子的博客
05-29 1184
1.localStorage和sessionStorage功能 早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。 1.cookies的大小限制在4kB，不适合大量的数据存储。 2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。 3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。 HTML5很...
本地数据存储 localStorage sessionStorage
06-01
在 Web 应用程序中，我们经常需要在浏览器中保存一些数据，以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能，Web 浏览器提供了两种本地数据存储方式：`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API，可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的，除非用户手动清除，否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据将被删除。 另外，`localStorage` 中保存的数据可以在不同的窗口或标签页中共享，而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地，我们可以使用 `sessionStorage` 来读取和保存数据： ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是，`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据，如果需要保存其他类型的数据，需要先将其转换为字符串类型。例如，我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串，然后再保存到本地存储中。在读取数据时，需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

慕容屠苏

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值