html5 localStorage本地存储_动力节点Java学院整理


Posted in HTML / CSS onJuly 06, 2017

localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

在JavaScript语言中可通过 window.localStorage 或 localStorage 调用此对象。

特点

1) 同源策略限制。若想在不同页面之间对同一个localStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)

2) 只在本地存储。localStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效。

3) 永久保存。保存的数据没有过期时间,直到手动去除。

4) 存储方式。localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。

6) 同浏览器共享。localStorage的数据可以在同一个浏览器的不同标签页的同源页面之间共享。

浏览器最小版本支持

支持localStorage浏览器的最小版本:IE8、Chrome 5。

适用场景

localStorage 比较适用2个地方:

1) 数据比较大的临时保存方案。如在线编辑文章时的自动保存。

2) 多页面访问共同数据。sessionStorage只适用于同一个标签页,localStorage相比而言可以在多个标签页中共享数据。

属性

html5 localStorage本地存储_动力节点Java学院整理readonly int localStorage.length :返回一个整数,表示存储在 localStorage 对象中的数据项(键值对)数量。

方法

html5 localStorage本地存储_动力节点Java学院整理string localStorage.key(int index) :返回当前 localStorage 对象的第index序号的key名称。若没有返回null。

html5 localStorage本地存储_动力节点Java学院整理string localStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

html5 localStorage本地存储_动力节点Java学院整理void localStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

html5 localStorage本地存储_动力节点Java学院整理void localStorage.removeItem(string key) :将指定的键名(key)从 localStorage 对象中移除。

html5 localStorage本地存储_动力节点Java学院整理void localStorage.clear() :清除 localStorage 对象所有的项。

事件

html5 localStorage本地存储_动力节点Java学院整理storage :当对 localStorage 进行更改时,触发此事件。

在IE 11和Chrome中对此事件有不同的触发机制:

1) 当前页面是否触发:当前页面进行localStorage 操作时,IE 11是当前页面也触发此事件,Chrome 是当前页面不触发此事件。

2) 对localStorage进行重复操作:如存入重复的数据,IE 11是触发此事件,Chrome 是不触发此事件。

存储数据

采用setItem()方法存储

localStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

通过属性方式存储  

localStorage['testKey'] = '这是一个测试的value值';

获取数据

通过getItem()方法取值

localStorage.getItem('testKey'); // => 返回testKey对应的值

通过属性方式取值

localStorage['testKey']; // => 这是一个测试的value值

存储Json对象

localStorage 也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值:将对象转换为Json字符串
localStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时:把获取到的Json字符串转换回对象
var userJsonStr = localStorage .getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 #HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 #HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 #HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 #HTML / CSS
HTML5中视频音频的使用详解
Jul 07 #HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python实现清屏的方法
2015/04/30 Python
Python之文字转图片方法
2018/05/10 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英文求职信结束语大全
2013/10/26 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
营业员岗位职责范本
2015/04/14 职场文书
暑期家教宣传单
2015/07/14 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书