详解JavaScript中localStorage使用要点

localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难、容量有限的问题。

localStorage有以下几个特点

1.localStorage是一个普通对象,任何对象的操作都适用。

2.localStorage对象的属性值只能是字符串。

  这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式。如

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

  当然也可以借助JSON类,将对象转换成字符串保存,然后在取出来的时候将json字符串转换成真正可用的json对象格式

3.localStorage支持的默认空间大小为5M,现代浏览器支持良好

  借用xiaowei0705的HTML5 LocalStorage 本地存储的切图

  我们提醒大家需要注意的是在手机上使用的时候需要后台开辟内存空间支持才行。

  "QUOTA_EXCEEDED_ERR”"是一个异常,如果你使用的存储容量超过了限度(5M)就会报这个异常

4.localStorage本身带有方法有

  添加键值对:localStorage.setItem(key,value)

  获取键值:localStorage.getItem(key)

  删除键值对:localStorage.removeItem(key)。

  清除所有键值对:localStorage.clear()。

  获取localStorage的属性名称(键名称):localStorage.key(index)。

还有一个和普通对象不一样的属性length:

  获取localStorage中保存的键值对的数量:localStorage.length。

  下面这个例子用来获取localStorage的键值对

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

  本着相信原生方法的原则应尽量使用原生的方法来操作localStorage。但是在iPhone/iPad上有时调用setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误。解决方法是在setItem之前先removeItem()。所以从这个兼容问题来看,貌似使用对象添加/删除键值对更方便一些,兼容也更强一些。

5.localStorage事件

   localStorage的storage事件,在存储事件的处理函数中是不能取消这个存储动作的。

  存储事件只是浏览器在localStorage数据变化发生之后给你的一个通知。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:

•storageArea: 表示存储类型(Session或Local)
•key:发生改变项的key
•oldValue: key的原值
•newValue: key的新值
•url*: key改变发生的URL

  注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性

  PS:在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题,chrome修改localStorage能触发本页面的storage事件,Firefox 自身页面修改storage后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.实例推荐PrimeTechBlog的初试WebStorage之localstorage

  所以建议,为兼容浏览器或者自己写兼容处理函数,或者干脆不用storage事件。

  实例

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

一些小点:

   localStorage要通过域名访问的方式才能起作用

 如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。

  localStorage使用方式一致

•localStorage - 没有时间限制的数据存储
•sessionStorage - 针对一个 session 的数据存储

localStorage提供了几个方法:

1、存储:localStorage.setItem(key,value)

如果key存在时,更新value

2、获取:localStorage.getItem(key)

如果key不存在返回null

3、删除:localStorage.removeItem(key)

一旦删除,key对应的数据将会全部删除

4、全部清除:localStorage.clear()

某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

5、遍历localStorage存储的key

.length 数据总量,例:localStorage.length
.key(index) 获取key,例:var key=localStorage.key(index);

6、存储JSON格式数据

JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象,返回解析后的对象

备注:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

时间: 2016-01-10

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. 不同

JavaScript中localStorage对象存储方式实例分析

本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

JS localStorage实现本地缓存的方法

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>本地缓存</title>     <script type="text/javascript">         var strKey = "strKey";        

JS 中LocalStorage和SessionStorage的使用

最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorage.getItem(key); window.localStorage.getItem(key); //新增key-value,若key已存在,则更新value; window.sessionStorage.setItem(key,value); window.localStorage.setIte

详解Vue中localstorage和sessionstorage的使用

1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

JS中利用localStorage防止页面动态添加数据刷新后数据丢失

非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽: 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间. 注意点: cookie的访问需要服务器环境,直接在本地文件访问无效: cookie的访问和设置需要导入jquery.cookie.js文件: 浏览器对每一个访问的地址下可添加的c

常见的浏览器存储方式(cookie、localStorage、sessionStorage)

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. •会话状态管理(如用户登录状态.购物车.游戏分数或其它需要

js中使用正则表达式查找字母和数字的方法

废话不多说,先看下js中使用正则查找字母和数字的方法,具体代码如下所示: <!DOCTYPE HTML> <html > <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ localStorage.fiveData="

工厂模式在JS中的实践

一.   写在前面 工厂模式和抽象工厂在后台代码中的使用,相信你一定非常熟悉,所以关于概念的东西也用不着我多说.你可以用其做为类与类之间,层与层之间的解耦.工厂模式没有什么难点,在JS中其实思想也是一样的,所以废话不多说,直接上实践的场景和代码. 二.  场景描述 1.最近的项目的登陆使用了Owin认证,所以token必须找好地方进行存储,鉴于token需要在请求API资源的时候放到请求头的Authorization当中,以便在进入WebAPI前进行身份验证.所以我不想在主流浏览器中的cooki

老生常谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

vue.js中实现登录控制的方法示例

本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l