HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式。包括对存储对象的添加、修改、删除、事件触发等操作。
目录
1. 介绍
1.1 说明
1.2 特点
1.3 浏览器最小版本支持
1.4 适合场景
2. 成员
2.1 属性
2.2 方法
2.3 事件
3. 示例
3.1 存储数据
3.2 读取数据
3.3 存储Json对象
1. 介绍
1.1 说明
localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
在JavaScript语言中可通过 window.localStorage 或 localStorage 调用此对象。
1.2 特点
1) 同源策略限制。若想在不同页面之间对同一个localStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)
2) 只在本地存储。localStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效。
3) 永久保存。保存的数据没有过期时间,直到手动去除。
4) 存储方式。localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。
5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。
可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。
6) 同浏览器共享。localStorage的数据可以在同一个浏览器的不同标签页的同源页面之间共享。
1.3 浏览器最小版本支持
支持localStorage浏览器的最小版本:IE8、Chrome 5。
1.4 适用场景
localStorage 比较适用2个地方:
1) 数据比较大的临时保存方案。如在线编辑文章时的自动保存。
2) 多页面访问共同数据。sessionStorage只适用于同一个标签页,localStorage相比而言可以在多个标签页中共享数据。
2. 成员
2.1 属性
readonly int localStorage.length :返回一个整数,表示存储在 localStorage 对象中的数据项(键值对)数量。
2.2 方法
string localStorage.key(int index) :返回当前 localStorage 对象的第index序号的key名称。若没有返回null。
string localStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。
void localStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。
void localStorage.removeItem(string key) :将指定的键名(key)从 localStorage 对象中移除。
void localStorage.clear() :清除 localStorage 对象所有的项。
2.3 事件
storage :当对 localStorage 进行更改时,触发此事件。
在IE 11和Chrome中对此事件有不同的触发机制:
1) 当前页面是否触发:当前页面进行localStorage 操作时,IE 11是当前页面也触发此事件,Chrome 是当前页面不触发此事件。
2) 对localStorage进行重复操作:如存入重复的数据,IE 11是触发此事件,Chrome 是不触发此事件。
3. 示例
3.1 存储数据
3.1.1 采用setItem()方法存储
localStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
3.1.2 通过属性方式存储
localStorage['testKey'] = '这是一个测试的value值';
3.2 获取数据
3.2.1 通过getItem()方法取值
localStorage.getItem('testKey'); // => 返回testKey对应的值
3.2.2 通过属性方式取值
localStorage['testKey']; // => 这是一个测试的value值
3.3 存储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
最新文章
- 《连载 | 物联网框架ServerSuperIO教程》1.4种通讯模式机制。附小文:招.NET开发,结果他转JAVA了,一切都是为了生活
- 认识Git
- 不一样的dynamic解析json 万能方法
- avalon学习笔记
- 在apache中设置访问目录后进入的默认页面为index.php
- Scala access modifiers and qualifiers in detail
- Oracle插入时间
- vim替换及多行注释命令
- 已收录的帝国cms文章被误删除了怎么办?
- BZOJ1975 [Sdoi2010]魔法猪学院
- javascript 高级程序设计学习笔记(面向对象的程序设计) 1
- SPOJ GSS1_Can you answer these queries I(线段树区间合并)
- vue2.0填坑有感(持续更新ing)
- Jmeter学习笔记03-元件作用域及执行顺序
- js的原型/原型链/构造函数
- imp导入时 出现IMP-00017:由于 ORACLE 错误 6550, 以下语句失败: 解决方法
- Java中关于LockSupport的简单入门记录
- mysql权限管理命令示例
- 算法笔记_213:第七届蓝桥杯软件类决赛部分真题(Java语言C组)
- The Bells are Ringing UVALive - 4060(枚举求解)
热门文章
- 隐私泄露杀手锏 —— Flash 权限反射
- 干货分享:让你分分钟学会 JS 闭包
- Asp.Net MVC中使用StreamReader读取“Post body”之应用场景。
- 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
- Redis简单案例(二) 网站最近的访问用户
- scanf类型不匹配造成死循环
- TYPESDK手游聚合SDK服务端设计思路与架构之二:服务端设计
- Android Socket连接PC出错问题及解决
- Linux 安装Mono环境 运行ASP.NET(一)
- MemCache超详细解读