HTML5 Web存储
2017-12-03 15:45
232 查看
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
localStorage的使用是遵循同源策略的,所以不同的网站之间是不能共用相同的localStorage。
localStorage只支持string类型的存储。
使用示例:
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
如何创建并访问一个 sessionStorage:
Safari中需要先在“偏好设置”、“高级”中将“在菜单中显示开发选项”勾选。
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }
localStorage对象
localStorage 对象存储的数据没有时间限制。localStorage的使用是遵循同源策略的,所以不同的网站之间是不能共用相同的localStorage。
localStorage只支持string类型的存储。
使用示例:
if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log(typeof storage["a"]); //第一种方法读取 var a=storage.a; console.log(a); //第二种方法读取 var b=storage["b"]; console.log(b); //第三种方法读取 var c=storage.getItem("c"); console.log(c); }
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。如何创建并访问一个 sessionStorage:
if (sessionStorage.clickcount){ sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
浏览器中的localStorage管理工具
Chrome和Safari均有自己的本地localStorage查看和管理工具,Firefox拥有第三方插件可以管理localStorage,Chrome中位于开发人员工具中的Resources左侧的Databases(可能稍早一点的版本位于单独出来的工具栏,我的在Appliction里)。我们上面的localStorage在Chrome查看如下,利用这个工具可以修改或者删除相应项。Safari中需要先在“偏好设置”、“高级”中将“在菜单中显示开发选项”勾选。
相关文章推荐
- 【html5】Web存储_locaStorage对象的应用
- HTML5 Web 存储
- HTML5本地存储之Web Storage篇
- HTML5本地存储——Web SQL Database
- HTML5——web存储
- HTML5客户端(Web)数据存储,localStorage与sessionStorage
- HTML5 web存储
- HTML5本地存储之Web Storage篇
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
- HTML5 本地存储1--Web Storage和本地数据库Web SQL Database
- HTML5 Web 客户端五种离线存储方式汇总
- HTML5-离线存储,Web Worker
- html5的web存储
- HTML5客户端数据存储机制Web Storage和Web SQL Database
- html5API之web存储
- HTML5开发学习:本地存储Web Sql Database
- HTML5学习笔记一web存储
- HTML5-本地存储 Web留言板
- android WebView html5 使用本地存储
- HTML5学习笔记 Web存储