关于localStorage和sessionStorage存储用法的一些细节说明----------localStorage和sessionStorage存储必须字符串化

localStorage 和 sessionStorage 基本用法基本一致;localStorage需要会长时间保存,而sessionStorage会保存在当前对话框,会随着创库的关闭而被清除,

存储的数据格式必须是string;所以当localStorage.setItem(a,b)时,不管b为何种数据,在存储时都会被强制转化为string格式,进而在拿取getItem(a)时得到的永远是字符串,

但是在存储过程中如下细节需要注意:

1.存储数组时如果不处理,得到的是数组元素的字符串,

var arr=[1,2,3];
localStorage.setItem("temp",arr);
console.log(typeof localStorage.getItem("temp"));
console.log(localStorage.getItem("temp"));

//得到结果
string;

1,2,3;

如果想得到数组,必须先再存储时将其字符串话

var arr=[1,2,3];
localStorage.setItem("temp",JSON.stringify(arr));
console.log(typeof localStorage.getItem("temp"));
console.log(localStorage.getItem("temp"));
//得到结果
string
[1,2,3]

此时虽然已经得到数组,但是是字符串形式的数组,业务中需要将其JSON.parse(),转换格式才能进一步利用

var arr=[1,2,3];
localStorage.setItem("temp",JSON.stringify(arr));
console.log(typeof localStorage.getItem("temp"));
console.log(localStorage.getItem("temp"));
console.log(JSON.parse(localStorage.getItem("temp")));
//得到结果
string
[1,2,3]//string
[1, 2, 3]//array

2.存储对象(包括JSON对象)时如果不处理,得到的是对象元素的字符串,

var obj = {"a": 1,"b": 2};
localStorage.setItem("temp2", obj);
console.log(typeof localStorage.getItem("temp2"));
console.log(localStorage.getItem("temp2"));
//得到结果
string
[object Object]//键值对形式的字符串,因此是obj

此时对于结果不管是用eval()还是JSON.parse(),都无法解析,如需业务中正常利用,必须在存储前将其字符串化,然后获取后再格式化

var obj={"a": 1,"b": 2};
localStorage.setItem("temp",JSON.stringify(obj));
console.log(typeof localStorage.getItem("temp"));
console.log(localStorage.getItem("temp"));

console.log(JSON.parse(localStorage.getItem("temp")));
console.log(typeof JSON.parse(localStorage.getItem("temp")));

//得到结果
string
{"a":1,"b":2}//string
{a: 1, b: 2}//obj
object

总结:正常业务中时,不管是数组还是JSON对象,为保证存储读取后能正常使用,最好存储前JSON.stringify()一下需要存储的数据

原文地址:https://www.cnblogs.com/yogic/p/9331019.html

时间: 2024-11-02 16:55:00

关于localStorage和sessionStorage存储用法的一些细节说明----------localStorage和sessionStorage存储必须字符串化的相关文章

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

localStorage 和 sessionStorage 的用法

其实提供的接口很简单,localStorage 和 sessionStorage 的用法是一样的. 设置数据:setItem(name, value) 获取数据:getItem(name) 删除键值:removeItem(name) 删除所有键值:clear() 例如: localStorage.setItem('name', 'wenzhixin'); localStorage.getItem('name'); //'wenzhixin' localStorage.removeItem('na

sessionStorage的用法总结

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储.下面是其用法: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>SessionStorage</titl

localStorage与location的用法

1.localStorage 是h5提供的客户端存储数据的新方法: 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 设置存储时localStorage.setItem()方法,获取时用localStorage.getItem()方法: 提交数据时: 获取数据进行操作时: 如下,存储在本地中,除非你主动删除, 2.Location Location 对象包含有关当前 URL 的信息

Android 存储文件方式之一---SharedPreferences 内容提供者,以xml 的方式进行数据 存储。是一种轻量级的文件数据存储

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //UI界面的布局 文件<br><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"

转!!MySQL中的存储引擎讲解(InnoDB,MyISAM,Memory等各存储引擎对比)

MySQL中的存储引擎: 1.存储引擎的概念 2.查看MySQL所支持的存储引擎 3.MySQL中几种常用存储引擎的特点 4.存储引擎之间的相互转化 一.存储引擎: 1.存储引擎其实就是如何实现存储数据,如何为存储的数据建立索引以及如何更新,查询数据等技术实现的方法. 2.MySQL中的数据用各种不同的技术存储在文件(或内存)中,这些技术中的每一种技术都使用不同的存储机制,索引技巧,锁定水平并且最终提供广泛的不同功能和能力.在MySQL中将这些不同的技术及配套的相关功能称为存储引擎. 二.MyS

在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好

花了一下午时间,终于学会了在数据库中存储图片,以及在界面中显示图片了. 存储图片有两种方法: 一种是:直接把图片转换成二进制文件存储在数据库中. 一种是:存储图片的路径到数据库,用的时候直接调用路径给image等图像控件即可. 两种方法,有利有弊,第一种方法适合存储量少且重要的图片信息.第二种方法适合存储量大但不是太重要的图片. 我使用的是第二种方法,简单,实用. 下面就是我具体的实现过程: 首先我新建了两个网页文件,insert_photo.aspx / select_photo.apsx 第

云诺与传统网盘最大的不同即在于后者更侧重于存储本身,而云诺则更关注用户存储之后怎么更方便地使用这些云端的文件

“我本人就是Dropbox的重度用户.在美国的时候,我家里最夸张的时候一共有六台电脑在用,我经常为了找不到某个文件到底放在哪台电脑里而头痛,D ropbox的出现让我觉得它正是我想要的东西.”王淮顿了顿,接着说道,“不过,即便是这样,我也不是它的付费用户.” 王淮曾是Facebook的早期员工,2011年9月离开F acebook之后回国成为天使投资人.他对南都记者说的这段话,既证明了云存储服务在个人市场上真真实实存在的需求,也说出了这一市场的尴尬所在. 前期的服务器架设已然烧掉了大量资金,但个

存储-国内知名医药大学录播教室应用Infortrend存储

项目背景:该所院校是国家最早创办的高等医药学府之一.学校坚持"学术第一.师生为本.共生共赢"的理念,培养造就药界英才.这所院校自2012年开启智慧教学历程,进行可视化教学管理,目前已配有多媒体教室183间,其中76间为常态化录播教室及107间建设成可视化教室. 项目需求:? 常态化录播教室与可视化教室每天进行素材采集空间需求? 引入AI智能,对课堂数据采集与分析? 教学数据保存与备份项目描述:校方对所有多媒体教室进行统一规划建设,在每间教室中设有多个摄像头,通过前端259路摄像头,实时