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