JS的本地存储- sessionStorage/localStorage/数组对象的存储方式

最新推荐文章于 2024-06-28 07:50:49 发布
最新推荐文章于 2024-06-28 07:50:49 发布
阅读量3k 收藏 3
点赞数 2
分类专栏： JS 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43358004/article/details/124992526
版权
本文详细介绍了JavaScript中的本地存储机制，包括sessionStorage和localStorage的特点，如数据持久性、共享性及键值对存储方式。同时，讲解了如何将数组对象转换为字符串进行存储，并提供了增删查改的操作方法。最后，文章提供了一个总结性的思维导图，帮助读者巩固理解。
摘要由CSDN通过智能技术生成

JS的本地存储- sessionStorage/localStorage/数组对象存储

❤最后有你不可错过的总结的思维导图❤

1.特性

1）sessionStroage

1.页面刷新也不会丢失数据
2.在同一个窗口/页面下数据可以共享
3.以键-值对的形式存储使用

1）localStroage

1.数据永久存储 除非手动删掉
2.在同一个窗口/页面下数据可以共享
3.以键-值对的形式存储使用

2.存储

js中数据如果要存储到浏览器需要转换为数据的类型，因为浏览器只能存储进去字符串类型。

eg:需要 js 中的数组
arr=[{key：345}，{key：123}]
或者arr=[1,2,3,4]
或者arr={name:uname}存储

        //把数据放在内存里
        //先用 JSON 转换格式
        str =
最低0.47元/天 解锁文章
JS的本地保存localStorage、sessionStorage用法总结
kerryqpw的博客
05-09 4万+
JS的本地保存localStorage、sessionStorage用法总结
JS向LocalStorage/SessionStorage存储对象数组
m0_60014407的博客
08-18 1218
在日常开发中，我们拿到一些从后台传过来的数据想把它存在localStorage方便我们随时取用； 但是会发生以下情况： 比如下面这样的数据 当我们用 window.localStorage.setItem('localdata',this.state.listdata); 这样去存它的时候，发现localstorage是这样的： 如何解决？ 使用下面的方式 let local = JSON.stringify(this.state.listdata); ..
js本地存储：localStorage
dongcancui8976的博客
11-20 371
一.简介 　　localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库 　　 ——注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。 二.具体使用方式如下： 　　1.localStorage -没有时间限制的数据...
js-前端存储之sessionStorage
2301_76671906的博客
02-19 1415
sessionStorage是 Web Storage API 提供的一种客户端存储机制，用于在浏览器中保存会话级别（session-level）的数据。与localStorage不同，sessionStorage中存储的数据在用户关闭标签页或浏览器窗口时会被清除。
JS 本地存储 sessionStorage localStorage
christmassss的博客
01-16 831
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。Application中Session Storage中可以查看到存储的数据。Application中Local Storage中可以查看到存储的数据。4、只能存储字符串，可以将对象JSON.stringify)编码后存储。2、设置、读取方便、甚至页面刷新不丢失数据。2、在同一个窗口(页面)下数据可以共享。1、数据存储在用户浏览器中。
使用js获取sessionStorage
weixin_34279061的博客
12-12 1422
获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert（）；让人容易看到， 其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样 例如：我上一篇所做的为button按钮添加回车事件的项目中所用到的可以使用js中的sessionStora...
JS localStorage存储对象，sessionStorage存储数组对象操作示例
10-15
主要介绍了JS localStorage存储对象，sessionStorage存储数组对象操作,结合实例形式详细分析了JS使用localStorage存储对象以及sessionStorage存储数组对象相关操作技巧与注意事项,需要的朋友可以参考下
在localStorage中存储对象数组并读取的方法
11-23
在`getData`函数中，首先将存储在`localStorage`中的字符串`job`取出，然后遍历这个字符串数组，将每个元素解析为JavaScript对象： ```javascript function getData() { window.localStorage.job = JSON.stringify...
js sessionStorage本地存储
黄大仙
08-12 1539
本地存储特性 数据存储在用户浏览器中 设置, 读取方便,甚至页面刷新数据不丢失 容量较大,sessionStorage约为5M,localStorage约为20M 只能存储字符串, 可以将对象JSON.stringify()编码后存储 window.sessionStorage 特        点 生命周期为关闭窗口 生命周期为关闭窗口 同一窗口下数据共享 以键值对形式存储 案例: html部分代...
js中的sessionStorage
qq_60504665的博客
11-24 555
该sessionStorage属性允许您访问当前源的会话Storage对象。sessionStorage类似于Window.localStorage;唯一的区别是当存储在localStorage中的数据没有到期设置时，存储在sessionStorage中的数据在页面会话结束时被清除。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。需要注意的是，存储在sessionStorage或localStorage 中的数据特定于页面协议的。一个Storage对象。
localstorage.js
07-01
前端js本地缓存
Javascript：本地存储之sessionStorage
最新发布
听海边涛声
06-28 291
Javascript：本地存储之sessionStorage
JavaScript中的sessionStorage
jakelihua
12-07 3650
简介：sessionStroage是JavaScript中的，在浏览器中存储数据的一个API，我们通过一个例子演示他的使用方法。
JS localStorage
tianlianchao1982的专栏
12-27 618
dfs               别名(key):                               网站名：                               网 址：                                                   输入网站名：          
js localStorage
树上骑个猴的博客
12-18 1903
localStorage是H5提供的永久存储空间，一般最大可存储5M数据，并且支持跨域隔离，他的出现极大提高了前端开发的可能性。localStorage的使用很多人都知道setItem，getItem,removeItem, 但他也可以直接以成员的方式操作。 localStorage.name = 'yd'; // 获取 localStorage.name; // yd // 删除 delete localStorage.name; // 清除全部 localStorage.clear(); // 遍历
JS—localStorage
weixin_45436744的博客
09-18 169
localstorage： 局部存储器 localstorage是一个只读属性，允许你访问一个Document源的对象，存储的数据将会保留在浏览器会话中。 存储在localStorage中的数据可以长期保留。 localStorage中的键值对是以字符串的形式存储，意味着数值类型会自动转化为字符串类型。 1、增加一个localStorage数据项目： localStorage.setItem('m...
JS之localStorage
wang_swa99er的博客
10-11 443
JS之localStorage 本地存储技术： localStorage(IE8以下不兼容) 1.永久存储 2.最大可以存储5M 客户端的一个微型数据库 3.只能存储string cookie 1.可以设置过期时间 2.最大可以存4kb 3.每一个域名下面最多可以存储50条数据 sessionStorage(结合后台使用) localStorage 对象 setItem(name,
js中的localStorage
weixin_46435234的博客
07-04 723
//localStorage会可以将第一次请求的数据直接存储到本地 /* 存放数据键值对到本地： localStorage.setItem("键值",数据) localStorage.键值 取出存放在本地的数据： localStorage.getItem("键值") 删除键值对 localStorage.clear() 清空 localStorage.removeItem("键值");　　 */ // 保存用户状态 const isLo.
js本地存储（localStorage）
2201_75918981的博客
03-17 1573
运行结果： 控制台打印obj对象，且通过f12->Application->Local Storage可以查看到存入了的JSON字符串格式的obj。运行结果：控制台打印666，且通过f12->Application->Local Storage可以查看到存入了键为number，值为666的值。取数据：JSON.parse(localStorage.getItem('obj')) //将obj先取出，再转为原来的数据格式。取数据：localStorgae.getItem(key)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值