初识localstorage用法
最近在做一个类似填报信息的页面,一共有8页,当点击切换到下一页的时候要求把上一页的数据存到本地,以便下次切换到这个页面的时候自动把值填上去,并且在最后一页提交数据的时候直接用localstorage里面的数据,类似这样:
window.localStorage.setItem('workInfoList', JSON.stringify(workInfoList));// 插入 对象转字符串
var requestworkInfo = JSON.parse(window.localStorage.getItem('workInfoList'));//读取 字符串转换成对象才能使用
然后就了解了一下localstorage的基本用法
一、什么是localStorage、sessionStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。以下是localStorage 和sessionStorage的区别
(1)localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
(2)他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
(3)localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
(4)sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
(5)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
二、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的,针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
这里我们以localStorage来分析
三、localStorage的使用
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性
if(!window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}
localstorage存储
比如现在要存储个人的学校信息,就可以像下面这样写:
var requesteducatData = {
"school": '吉林大学',
"startSchoolTime": '2015',
"finishSchoolTime": '2019',
"schoolTypeId": '大学',
};
window.localStorage.setItem('educatList', JSON.stringify(requesteducatData));//对象转字符串
运行后的结果如下:
这里说一下为什么要用JSON.stringfy将数据转一下,因为localstorage存储只支持字符串类型数据,所以我们要再存储之前将数据转一下。
最后在控制台上面打印出来的结果是:
localStorage的读取
console.log(JSON.parse(window.localStorage.getItem('educatList')))
console.log(window.localStorage.getItem('educatList'));
通过window.localStorage.getItem("名称")的方式读取,这里为什么要用JSON.parse转一下呢,就是因为我们在存储的时候对他进行了转换了,变成了字符串形式,通过JSON.psrse将字符串转换成对象,这样方便我们使用。
打印结果:
localStorage的删除
如果用完数据后不再使用就可以手动清除localstorage的存储数据
1.将localStorage的所有内容清除
window.localStorage.clear()
2.删除某个键值对
如下:localstorage里面存储着三对数据
我们清除一个
window.localStorage.removeItem('personalbaseinfo1')
控制台查看结果
localStorage的键获取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法,向其中出入索引即可获取对应的键
四、localStorage其他注意事项
特别需要注意的就是我们上面提到过的类型转换问题。
存储的时候可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串。读取的时候要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
另外还有一点要注意的是,其他类型读取出来也要进行转换
初识localstorage用法的更多相关文章
- localStorage用法总结
这些知识是参考下面的朋友的.谢谢分享. http://www.jianshu.com/p/39ba41ead42e http://www.cnblogs.com/st-leslie/p/5617130 ...
- HTML5中的localStorage用法
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.name 或者 window.localStorage["name& ...
- localStorage用法
引用:https://www.cnblogs.com/st-leslie/p/5617130.html const STORAGE_KEY = 'todos-vuejs'; export defaul ...
- localStorage 用法
localStorage使用总结 一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的 ...
- 【Android测试】【第一节】ADB——初识和用法
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4630046.html 写在前面的话 感觉自己进入Andr ...
- localStorage本地存储的用法
localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- localStorage、sessionStorage、cookie的有效期和作用域问题
sessionStorage,localStorage,cookie都可以实现客户端存储,三者的区别有哪些了? cookie作为最早期的被设计web浏览器存储少量数据,从底层看,它是作为http协议的 ...
- 21. sessionStorage和localStorage的使用
sessionStorage和localStorage的使用 前言 这是学习笔记,把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904. ...
随机推荐
- Halo(六)
Spring publish-event 机制 监听者模式包含了一个监听者 Listener 与之对应的事件 Event,还有一个事件发布者 EventPublish. 过程就是 EventPubli ...
- Vue学习笔记-插槽基本使用
为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...
- 【bzoj1458】士兵占领(最大流||有源汇最大流)
转载 http://hzwer.com/2963.html Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里 ...
- Android逆向之旅---Android应用的汉化功能(修改SO中的字符串内容)
一.前言 今天我们继续来讲述逆向的知识,今天我们来讲什么呢?我们在前一篇文章中介绍了关于SO文件的格式,今天我们继续这个话题来看看如何修改SO文件中的内容,看一下我们研究的主题: 需求:想汉化一个Ap ...
- python数据储存
python数据储存 csv文件的操作 安装csv包打开cmd 执行 pip install csv引入的模块名为csv 读取文件 with open("xx.csv"," ...
- 执行hbase zkcli命令报错
执行hbase zkcli后报错信息如下: 15/10/02 15:17:55 INFO zookeeper.ZooKeeper: Client environment:java.library.pa ...
- webpack 中vue文件使用scss需要注意的地方
需要使用npm添加node_sass和sass_loader 并且在配置文件中添加规则: { test: /\.scss$/, use: ["style-loader", &quo ...
- Visual Studio Code - 调试 Node.js 代码
官方的文档写的太好了!大家还是看参考资料吧. 参考资料: Debugging in Visual Studio Code Debug Node.js Apps using Visual Studio ...
- selenium和phantomjs,完成豆瓣音乐排行榜的内容爬取
代码要多敲 注释要清晰 哪怕再简单 #使用selenium和phantomjs,完成豆瓣音乐排行榜的内容爬取 #地址:https://music.douban.com/chart #导入需要的模块 f ...
- js获取下拉框的value值
var Resultstr=""; var param = { action: "MoneyList" };//参数拼接 $.ajax({ type: &quo ...