html本地存储localStorage和sessionStorage存对象

本地存储 sessionStorage和localStorage sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用storage只能存储字符串的数据,对于JS中常用的数据或对象却不能直接存储。但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。请看下面的代码。var obj = { name:'Jim',sex:'女' }; / 阅读详情

HTML5提供了很多本地缓存的API,我个人用到的是localStorage和sessionStorage,这两个的用法也很简单,以key-value的形式,setItem("key",value) ,getItem('key')这是其中的写入和读取的方法,还有常用的clear(),remove()等,localStorage是没有过期策略,永久保存,除非手动删除,而sessionStorage老司机应该自然会想到session,对的,就是打开新的相同的页面或者关闭浏览器数据就过期,这两者存储的数据量要比cookie多。

好,正题,最近做Cordova的小demo,那天遇到一个需要在客户端缓存数据的问题,于是我首先想到的就是用H5的本地存储了,毕竟是运行在手机上的,基本上都支持。

我个人是比较追求完美主义的,所以怎么能够忍遇到一个页面就向后台请求一次数据,于是我就想的是第一次请求的时候,如果读取本地,没有信息,那么直接访问后台请求,如果有,直接从本地读取,好了,坑来了,我们在本地存储的数据肯定不会是一个字符串那么简单,于是,就扯到了前端序列化,有一个方法叫JSON.stringify(src),src是源对象,存进去之后,当然读取的时候就要反序列化了,eval("("+data+")");//转换为json对象 
为什么要 eval这里要添加 “("("+data+")");//”呢? 
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。 

然后就可以实现本地缓存数据了,一个小坑,稍微的耽搁了我一点儿时间。


本地存储sessionStorage 会话存储和 localStorage 永久存储 在h5中,本地存储有两个,一个永久存储locallstorage和会话存储sesstionStorage 他们可以把一些数据存贮在浏览器端 他们的应用场景大概是有,记住用户信息,记住阅读历史等等 1.1sessionStorage 会话存储 可以在浏览器内容中存一些数据 => 字符串数据而已 不是说存视频 使用h5可以在本地存储用户的浏览器数据。 cookie 也可以存储字符串 cookie... 阅读详情

相关推荐

HTML5本地存储(localStorage和sessionStorage)

HTML5引入了本地存储机制,使得网页能够在客户端存储数据。Web Storage (localStorage 和 sessionStorage): 提供了在浏览器关闭后仍然保持数据的能力,数据存储在客户端,并没有过期时间。: 仅在当前会话期间(即当前浏览器窗口或标签页处于打开状态)有效,关闭窗口或标签页时会被清除。这两种存储方式都是基于键值对的形式存储数据,并且只能存储字符串类型的数据。但是,你可以使用和将对象转换为字符串并存储,以及从字符串中解析出对象。

百赢出品,必属精品 2314

sessionStorage使用(存储字符串,对象)

sessionStorage使用

子兮! 2978

Spring Boot 实现多图片上传并回显,涨姿势了~

上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可。由于是多图片上传所以用数组来接。此处应该注意参数名应该和<input>中的name值相对应: @RequestMapping("/pic") @ResponseBody publicResponseEntity<String>pic(MultipartFile[]pictures)throwsException{ ResponseEnti...

weixin_54556126的博客 894

sessionstorage(会话存储对象)使用、存储、读取、删除(一)

sessionstorage(会话存储对象)使用、存储、读取、删除

qq_44438941的博客 1万+

Realtek RTD1319D芯片解析:H.266与AV1双解码的机顶盒SoC

视频编解码技术是数字媒体传输的核心,H.266/VVC作为新一代标准,相比H.265提升50%压缩效率,显著降低带宽需求。其实现原理依赖于专用硬件解码器和并行处理架构,在超高清视频传输领域具有重要价值。Realtek RTD1319D作为首款商用H.266处理器,采用异构计算设计,集成四核ARM CPU和独立视频处理单元,同时支持AV1解码,兼顾市场兼容性。该SoC特别适合4K机顶盒、数字标牌等应用场景,其HDMI 2.1a接口和DVB解调器为超高清内容传输提供完整解决方案。开发时需注意散热设计和内存配置优

weixin_42591413的博客 673

知识检索中的四大评估指标:准确率、精确率、召回率与F1分数详解

摘要:NLP算法面试中,评估知识检索系统的核心指标包括准确率、精确率、召回率和F1分数。准确率衡量整体预测正确性,但在样本不均衡时可能失真;精确率关注预测正类中的真实比例(查准能力),召回率衡量真实正类被预测的比例(查全能力)。F1分数是两者的调和平均,提供综合评估。这些指标通过混淆矩阵计算,并存在制约关系:提高召回率往往降低精确率,反之亦然。应用场景包括文档检索(评估结果质量和覆盖度)和文本分类(如垃圾邮件过滤)。面试需掌握指标区别、适用场景及平衡方法(如调整阈值)。F1分数在样本不平衡时比准确率更具参考

Ven%的博客 1765

SessionStorage如何存放对象

前后端分离模式下,很多时候需要用到window.sessionStorage对象 例如用到vuex的项目,刷新页面后state中的数据全部初始化,那么就要再次发送请求 或者用户所在界面有vue-router跳转后的参数,那么刷新页面后参数就不见了,请求无参数,恰好服务器端未考虑该情况,那么就会导致一系列问题。 sessionStorage并不支持存储对象,一个个的键名来取又太麻烦,有更简单巧...

LiuBai_X的博客 5014

应用软件——Altium Designer 19 Gerber/坐标文件

如何输出Gerber文件 步骤如下: 打开需要输出的PCB文件 2. 设置原点坐标 3. 打开Gerber Files 选项,File–>Fabrication Opuputs–>Gerber Files。 4. General参数设置。 用于指定输出Gerber文件中使用的单位(Units)和格式(Format)。单位可以是公制(Millimeters)和英制(Inches);格式栏中2:3,2:4,2:5代表文件中使用的不同数据精度,其中2:3表示数据含2位整数3位小数;相应的,另外两个分

染血黑兔的博客 7205

localStorage存对象

什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。 localStorage的优势 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的

weixin_45847120的博客 1896

汇川AM402、H3U和上位机C#ModebusTcp通讯

目录一、测试任务二、测试环境三、PLC工程1、组态配置2、ip地址、端口号 3、全局变量定义四、C#端Winform程序创建1创建主界面 2、创建子窗口 3、运行生成,界面效果4、Modebus协议说明5、Modebus操作说明六、测试1、寄存器读测试 2、MW1300寄存器的BIT位3、写寄存器测试4、PLC断电或者断网 七、工程下载连接1、PLC作为ModebusTCP端,端口号都是502,PC端上位机软件作为TcpClient去连接多台PLC。PC端读写PLC寄存器。2、PC端在有的PLC断电、断网的

panjinliang066333的博客 2万+

YOLOv8 TensorRT C++部署实战详解:从XMake构建到推理流水线

本项目实现了一个基于YOLOv8和TensorRT的高性能火灾烟雾检测系统,具有以下核心特点: 技术架构:采用TensorRT 8.6+进行GPU加速推理,结合CUDA 12.1和OpenCV 4.8+,实现高效计算机视觉处理。系统使用XMake替代CMake构建,配置更简洁高效。

hscing的博客 1066

如何用sessionStorage保存对象和数组

标题:本地存储、会话存储 存储数组对象: sessionStorage不可以直接存储数组对象,需要先把数组对象转化为JSON对象,再用JSON对象去存储 var userEntity = {undefined tempArr:[1,2,3,4,5,6,7,8,9] }; // 存储值:将对象转换为Json字符串 sessionStorage.setItem('arr', JSON.stringify(userEntity)); // 取值时:把获取到的Json字符串转换回对象 va

m0_55546349的博客 8765

【网络安全】Python代码审计高危函数与安全审计建议

Python 灵活且动态的特性使得开发便捷,但同时也带来了严重安全隐患。如果开发者缺乏安全意识,极易引入命令执行、反序列化漏洞及模板注入漏洞。本文总结了 Python 中常见的高危函数、模块和第三方库,并给出对应的审计建议及其原理解析,供安全研究人员和开发者参考。

等风来 417

cookie、sessionStorage和localStorage的区别

一、 概念的理解 webstorage本地存储 1)webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage 2)localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信 3)ses...

浮生离梦的博客 8万+

《QGIS快速入门与应用基础》【专栏完整目录】

《QGIS快速入门与应用基础》第一卷专栏完整目录,覆盖 001–328 全部篇目与附录,逐篇可跳转。

LuckyHanMo的博客 1302

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

【JavaScript】本地存储 --- localStorage 和 sessionStorage 详解

本地存储(Local Storage)是指在用户浏览器中存储数据的方式,它允许 Web 应用程序将少量数据保存在用户设备上,方便页面之间、甚至关闭浏览器后的数据持久化。存储容量大:相比 Cookie 的 4KB 限制,和可以存储大约 5MB 的数据(具体大小因浏览器不同略有差异)。不会随着 HTTP 请求发送:与 Cookie 不同,本地存储的数据不会在每次请求时发送到服务器,从而减少了带宽的消耗。基于键值对存储:通过简单的键值对形式来存储和访问数据,使用方便。和。

lph159的博客 1万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

HTML5本地存储localStorage,sessionStorage

HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /** * H5:数据存储方式,可以携带用户信息id * * 注意: * 此方法存文件为key,value方式 * 注意key不要重复 * *本地存储使用方法: * storage.setItem("name", "Rick"); //调用setItem方法,存储数据 * alert(storage.getItem("name")); .

qq_36521848的博客 1万+

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

html5本地存储——sessionStorage和localStorage

sessionStorage和localStorage数据的存储以及获取,以及两者的区别 html5中提供了两种本地存储的方式:localStorage(本地存储)和sessionStorage(会话存储) window.sessionStorage(会话存储):暂时储存,浏览器关闭之后会清除 window.localStorage (本地存储):本地储存,浏览器关闭之后依旧不会清除,只能人为删除 平时储存的话建议使用sessionStorage; 本地存储特性: 1.数据存储在用户浏览器中 2.设置.

leilei7407的博客 1578

本地存储—sessionStorage、localStorage

1.本地存储概述 1.1 背景 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经 常性在本地存储大量的数据,HTML5 规范提出了相关解决方案。 1.2本地存储特性 数据存储在用户浏览器中 设置、读取方便、甚至页面刷新不丢失数据 容量较大,sessionStorage 约5M、localStorage 约20M 只能存储字符串,可以将对象 JSON.stringify() 编码后存储 2.window.sessionSto...

m0_59030524的博客 3816

详解localStorage和sessionStorage

localStorage和sessionStorage一、什么是 localStorage、sessionStorage二、使用方法三、localStorage 的优势与局限 一、什么是 localStorage、sessionStorage 在 HTML5 中,新加入了一个 localStorage 特性,这个特性主要是用来作为本地存储来使用的,解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k), localStorage 中一般浏览器支持的是 5M 大小,

impact_factor的博客 7286

本地存储之sessionStorage与localStorage

目录1.本地存储的特性2.本地存储之sessionStorage(临时存储)2.1特点2.2使用方法2.2.1存储数据2.2.2获取数据 2.2.3删除数据2.2.4清空所有数据3.本地存储之localStorage(局部存储器) 3.1特点3.2使用方法3.2.1存储数据3.2.2获取数据3.2.3删除数据3.2.4清空所有数据1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3.容量较大,sessionStorage约5M、localStorage约20M4.只能存储字符串,可以将对象

shhghvvh的博客 1166

HTML 本地存储 localStorage和sessionStorage

HTML 本地存储 localStorage和sessionStorage

yasinawolaopo的博客 906

HTML5本地存储 localStorage 、sessionStorage、WebSQL、indexedDB

随着移动网络的兴起,WebApp也不在是新的话题了,以前Web与App原生系统最大3个差别在于: 用户体验,主要涉及到操作的平滑性,软件整体的性能。 本地存储能力,原生App能很好的发挥本地存储的能力,将不常更新的数据长期存储在本地。 操作系统资源,原生App能很好操作其他的app,最为常见的功能是共享到微信朋友圈。 这几年WebApp一直在想办法攻克这些难关,上述两个问题在随着技术的不断升...

新技术革命 1229

JavaScript本地存储 --- localStorage 和 sessionStorage

本地存储(Local Storage)是指在用户浏览器中存储数据的方式,它允许 Web 应用程序将少量数据保存在用户设备上,方便页面之间、甚至关闭浏览器后的数据持久化。存储容量大:相比 Cookie 的 4KB 限制,和可以存储大约 5MB 的数据(具体大小因浏览器不同略有差异)。不会随着 HTTP 请求发送:与 Cookie 不同,本地存储的数据不会在每次请求时发送到服务器,从而减少了带宽的消耗。基于键值对存储:通过简单的键值对形式来存储和访问数据,使用方便。和。

dd的博客 1417

HTML5本地存储-localStorage和sessionStorage

HTML5WebStorage本地存储 WebStorage是用来实现客户端存储数据,大家都知道之前的Cookie就是客户端存储的一种方式,今天看一看html5新增的本地存储方式:localStorage和sessionStorage。 localStorage:存储的数据会一直存在本地客户端,即使浏览器关闭了也会存在; sessionStorage: 只是针对同一个 session

每天进步一点点 1024

js中localStorage和sessionStorage功能

1.localStorage和sessionStorage功能 早期的web中使用cookies在客户端保存诸如用户名等简单的信息,但是,在使用cookies存储永久数据存在以下问题。 1.cookies的大小限制在4kB,不适合大量的数据存储。 2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。 3 cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽。 HTML5很...

素描本里的男子的博客 1241
上一篇: ionic加载百度地图失败的解决方案
下一篇: 文件上传显示缩略图
遛狗的代码
博客等级 码龄11年 10粉丝 52原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值