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
相关推荐
HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...
HTML5的localStorage是Web应用程序本地存储数据的一种强大方式,它允许开发者在用户的浏览器上持久化地存储关键数据,而无需依赖传统的Cookie或者复杂的HTTP请求。这个"基于html5 localStorage本地存储的一个简易...
HTML5 localStorage 页面数据同步demo。 演示方法,同时打开localstorage1.html, localstorage2.html, localstorage3.html,需用用http方式打开,修改任意一个后,点save或clear。 其他两个页面会同步更新。
locstor, 用于 HTML5 localStorage的JavaScript helper 库 ## locstor.js 一个 localStorage helper 库支持所有现代浏览器和内容为什么是 locstor.js?API插件运行单元测试如何贡献问题/评论 ?让我们面对它,HTML5...
1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...
HTML5的localStorage是Web开发中的一个重要特性,它允许开发者在用户浏览器上持久地存储数据,这些数据不受浏览器会话的影响,即使用户关闭了浏览器或重新启动电脑,数据仍然存在。这个功能极大地增强了Web应用程序...
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...
主要涉及的技术栈包括HTML、CSS、JavaScript(特别是ES6语法)以及jQuery库,并利用了浏览器的LocalStorage功能来持久化存储学生数据。下面将详细讲解这些技术及其在项目中的应用。 首先,HTML(HyperText Markup ...
HTML5 LocalStorage 本地存储是Web开发中一种用于持久化数据的重要特性,它允许开发者在用户的浏览器中存储大量数据,而这些数据不会随着浏览器会话的结束而消失。相比于早期的Cookie技术,LocalStorage提供了更大的...
LocalStorage 模块绑定到 HTML5 LocalStorage 键/值存储,如果持久存储不可用,则回退到基于内存的版本。 有关演示,请参阅lib_test/localstorage_looper.ml ,并确保打开开发人员控制台以查看日志输出。 如果你...
HTML5 LocalStorage 是一个在移动Web应用程序中存储数据的关键特性,它允许开发者在用户的浏览器上持久化地存储数据,而无需服务器的交互。这在构建离线应用、提高性能、减少网络请求等方面起到了重要作用。本篇文章...
堆本地存储基于堆(优先队列)缓存在 HTML5 localStorage 中。 这是 localStorage 之上的一个简单的缓存实现。 当元素的大小超过允许的最大元素数时,它利用堆(优先队列)算法()来驱逐元素。 对于每个项目,它...
角度存储Cookie,会话和本地存储的装饰器和服务该库添加了装饰器,使使用HTML5的localStorage和sessionStorage自动保存和恢复变量变得非常容易。 它还提供了Angular-Injectable Session-和LocalStorageService。包括...
#DBosta.js ###HTML5 localStorage DB 使用类似 JSON 格式的服务商不要忘记检查 demo.html 文件,那里有一个完整的例子##特征标准 Javascript 支持不需要框架添加/更新/删除集合添加/更新/删除记录使用 $and 和 $...
使用 HTML5 Localstorage 在浏览器中使用 JS 进行撤消、重做和持久性实现 这是一个非常小的(大约 100 行)javascript 库,它允许利用 HTML5 Localstorage 来实现页面上数据的撤消、重做和持久化。 它是如何开始的 ...