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实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
元素水平垂直居中的方式
Mar 31 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
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python中str.join()简单用法示例
2018/03/20 Python
Python 变量类型详解
2018/10/10 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
值传递还是引用传递
2015/02/08 面试题
营销与策划应届生求职信
2013/11/04 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
文明班集体申报材料
2014/05/23 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
如何优化vue打包文件过大
2022/04/13 Vue.js