<meta name="keywords" content="华夏棋牌,js_localstorage应用,localstorage应用,localstorage应用措施" />
华夏棋牌 > web前端 > js教程 > 注释

详解JavaScript中localStorage应用要点_javascript手艺

原创 2016-05-16 15:19:56 0 113
赞助会员专享特权
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);
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。然则在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。

php中文网最新课程二维码
  • 相关标签:js_localstorage应用 localstorage应用 localstorage应用措施
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • 详解JavaScript中localStorage应用要点_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173543)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169666)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137120)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130403)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129771)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节