详解JavaScript中localStorage使⽤要点
localStorage主要⽤来替代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);
//解析出来
var strA = stObj.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)
  获取键值：Item(key)
  删除键值对：veItem(key)。
sessionstorage和localstorage  清除所有键值对：localStorage.clear()。
  获取localStorage的属性名称（键名称）：localStorage.key(index)。
还有⼀个和普通对象不⼀样的属性length:
  获取localStorage中保存的键值对的数量：localStorage.length。
  下⾯这个例⼦⽤来获取localStorage的键值对
for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + Item(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、获取：Item(key)
如果key不存在返回null
3、删除：veItem(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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。