Html5 localStorage、sessionStorage操作

最新推荐文章于 2025-08-22 20:08:03 发布
原创 最新推荐文章于 2025-08-22 20:08:03 发布 · 163 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html5

本文深入解析了浏览器中的两种本地存储方式：localStorage与sessionStorage。详细介绍了它们的区别，包括数据的持久性和生命周期。并提供了具体的操作方法，如数据的保存、获取、删除及清空等关键步骤。

localStorage 浏览器（永久保存）

sessionStorage 浏览器（关闭窗口就删除数据）

操作
1、localStorage.setItem(key,value)  保存数据 例如：localStorage.setItem(''username','小明')

2、localStorage.getItem(key)           获取数据  localStorage.setItem(''username')

3、localStorage.removeItem(key)    删除数据  localStorage.setItem(''username')

4、localStorage.clear();                    删除所有数据localStorage数据

sessionStorage与localStorage 一致

精选资源
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
01-21
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 ...
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
12-14
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage（本地存储）,可以长期存储数据，...
HTML5 Canvas与localStorage简单应用
weixin_34123613的博客
12-06 118
Canvas 是HTML5的一大2d图形处理利器，localStorage是本地存储,它有一个很有意思的API，类似于观察者模型的事件storage事件，一者本地存储发生改变，它会响应注册了storage事件的所有窗口。 这样当我们在其中一个窗口的Canvas中画东西是，其它窗口可以监听并重绘，这就是下面的这个例子。 打开两个窗口，然后在其一个窗口画，另一个窗口则可以看到你画的东东...
HTML5 本地存储(localStorage & sessionStorage)
xiangxiongfly
12-28 1886
为了解决Cookie这种方式的限制，HTML5新增了3种全新的数据存储方式：localStorage、sessionStorage和indexedDB： localStorage用于永久保存客户端的少量数据。 sessionStorage用于临时保存客户端的少量数据。 indexedDB用于永久保存客户端的大量数据。
H5中的localStorage与sessionStorage
小罗的博客
05-04 588
📗目录 一、sessionStorage和localStorage 1.设置数据 2.读取数据 3.删除数据 4. 监听本地存储的变化 5.区别 🟢一、sessionStorage和localStorage sessionStorage和localStorage一样，都是用来缓存客户端缓存信息。 只能存储字符串类型对象。 🟢1.设置数据 localStorage.setI...
localstorage和sessionstorage的区别
热门推荐
XiaoSen207的博客
03-09 2万+
localstorage和sessionstorage的区别
一篇明白浏览器localStorage 和 sessionStorage存储方式
最新发布
2301_80270696的博客
08-22 1088
摘要： localStorage和sessionStorage是浏览器的Web Storage API，用于本地存储键值对数据，比Cookie更高效。两者均遵循同源策略，仅存储字符串，API用法相同。核心区别在于： 生命周期：localStorage永久存储（需手动清除），sessionStorage仅限当前标签页，关闭即失效。 作用域：localStorage跨标签页共享，sessionStorage隔离于单个标签页。 用途：前者适合长期偏好（如主题）、登录令牌；后者适用于临时表单或单页应用状态。 API
详解localStorage和sessionStorage
impact_factor的博客
09-11 7199
localStorage和sessionStorage一、什么是 localStorage、sessionStorage二、使用方法三、localStorage 的优势与局限 一、什么是 localStorage、sessionStorage 在 HTML5 中，新加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k)， localStorage 中一般浏览器支持的是 5M 大小，
cookies、localStorage 、sessionStorage 的区别
weixin_47227886的博客
04-10 5534
介绍：cookie，意思是小甜饼，顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右；每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精 简就精简！常用的应用场景：判断用户是否登录。介绍：localStorage，它是 HTML5 标准中新加入的技术，localStorage 已经被大多数浏览器所支持； sessionStorage，它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同，它只是
localStorage 和 sessionStorage
YSbnhoffer的博客
03-16 738
localStorage和 sessionStorage都是 Web Storage API 的一部分，用于在浏览器中存储数据。
html5 拖放、sessionStorage和localStorage
weixin_56393766的博客
07-19 291
html5 拖放、sessionStorage和localStorage
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
在实际应用中，选择使用localStorage、sessionStorage还是IndexedDB，主要取决于数据的生命周期、存储需求以及是否需要进行复杂的数据库操作。对于较小量、长期存储且无需索引的数据，localStorage和sessionStorage...
js实现拖动div元素（js实现元素拖动）
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
Js日期加减(天数)，时间加减，日期运算
Web前端工程师
01-20 7205
根据传入的日期做加减法计算，整数为加法，负数为减法，但是是天。 num可传入: 1,2,3,-1,-2,-3等，默认是加一天；date可传入: 2017-01-01格式的，不传的话默认是当天日期。 function dateChange(num = 1,date = false) { 　　if (!date) { 　　　　date = new Date();//没有传入值时,默认是当前日期 　　　　date = date.getFullYear() + '-' + (date.getMonth()
js导出excel（超简单）
Web前端工程师
08-19 6251
代码如下复制即可： <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p> <button onclick='tableToExcel()'>导出</button> </head> <body> <script> function tableToExcel(...
Echarts 实现图表自动轮播功能
Web前端工程师
11-09 5629
html部分： <div id="lunbo" style="width:480px;height:280px;"></div> js部分： var myChart = echarts.init(document.getElementById('lunbo')); var option = { // color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4.
动态修改layui switch 状态 与获取layui switch的值
Web前端工程师
10-23 5087
html部分： <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class="layui-input-block"> <input class="test" type="checkbox" name="switch" lay-skin="switch.
JS获取内网IP地址（兼容谷歌浏览器）
Web前端工程师
07-15 4592
window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var pc = new RTCPeerConnection({iceServers:[]}), noop =function(){}; pc.createDataChannel(''); //create a bogus data channel pc.cre...
Video.js实现播放rtmp流视频（100%完整运行）
Web前端工程师
08-13 4378
效果图：
HTML5 localStorage与sessionStorage详解
localStorage和sessionStorage是HTML5中引入的两种Web存储技术，用于在用户浏览器中持久化数据。这两种技术在Web应用中扮演着重要角色，尤其是在处理用户会话和存储大量数据时，它们弥补了Cookie的存储限制。 一、...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qaakd

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

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

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

打赏作者

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

抵扣说明：

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

余额充值