`
haiyupeter
  • 浏览: 426187 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

HTML5 localStorage

阅读更多

1.localStorage的操作API

setItem(key, value)

getItem(key)

length

key(i),相当于for (var key in params){ /* do something */}中的key一样,获取存储于localStorage中的key列表,有时候用于遍历

 

不过localStorage只能存储字符串 ,连基本对象都无法存储,对象在存入localStorage前,进行了Object.prototype.toString.call(data)转成字符串,在chrome中的测试如下:


 

2.对JSON数据的增强

既然只存字符串,如果json中只是文本数据,而不存在function对象等,将JSON转换成字符串,再存入localStorage,在getItem取出时将其进行转成JSON对象,方便使用

 

    var user = {"name": "peter", "age": 25, "interest": ["football", "pingpang", "games"]};
    localStorage.setItem("user", JSON.stringify(user));
    var userJSON = JSON.parse(localStorage.getItem("user"));   

 在chrome中的表现如下:


 

3.localStorage的应用场景

(1)当前页面数据缓存,cookie存储大小限制,现在可以存多些

(2)刷新页面,不刷新链接,使用localStorage可以保存页面的旧有信息,用于恢复页面内容,facebook或者google+中应用特别多

(3)在localStorage中存储图片,文件,非常的绕,并且浏览器支持的较少,希望以后不断完善:http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

 

4.其他客户端缓存方法

(1)在浏览器上的DB中存储图片或者文件:http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

(2)将图片信息用base64编码,然后将编码在于localStorage中,然后在img标签中解码显示:https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=zh_cn

 

  • 大小: 11.4 KB
  • 大小: 23.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics