Html5 本地存储
来源:互联网 发布:如果国民党赢了 知乎 编辑:程序博客网 时间:2024/06/08 13:09
首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage。
if(window.localStorage){ alert('This browser supports localStorage');}else{ alert('This browser does NOT support localStorage');}
sessionStorage与 localStorage 的异同
sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。
sessionStorage临时保存即当浏览器关闭时,保存数据会销毁保存方法:
sessionStorage.setItem('key','value');// 或 sessionStorage.key = value;
读取方法:
变量 = sessionStorage.getItem('key') //或 变量 = sessionStorage.key;
localStorage 永久保存 即将数据保存在客户端本地的硬件设备中,即使浏览器关闭,数据仍然存在。
保存方法:
localStorage.setItem('key','value'); // 或localStorage.key = 'value'
读取方法:
变量 = localStoragekey.getItem('key'); // 或localStorage.key
清除方法:
localStorage.removeItem("key");
ps: 如果希望一次性清除所有的键值对,可以使用clear()。
例子:
localStorage.k = 1;//设置k为"1"localStorage["k"] = "sfsf";//设置k为"sfsf",覆盖上面的值localStorage.setItem("e","isaac");//设置e为"isaac"var a1 = localStorage["k"];//获取k的值var a2 = localStorage.k;//获取k的值var b = localStorage.getItem("e");//获取e的值localStorage.removeItem("c");//清除c的值
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历
var storage = window.localStorage;function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)获得相应的键,再用getItem()方法获得对应的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); }}
需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()清除一下就可以了。
最后说一下storage 事件
在存储事件的处理函数中是不能取消这个存储动作的。storage事件只是浏览器在数据变化发生之后给 你的一个通知。我们可以在这个事件中处理当修改存储后所要执行的处理;
window.addEventListener('storage',function(){ // 当sessionStorage 或 localSetorage 的值发生变化时所要执行的处理。 },false)
在事件处理函数中,触发事件的事件对像(event)具有如下属性
- storageArea: 表示存储类型(Session或Local)
- key:发生改变项的key
- oldValue: key的原值
- newValue: key的新值
- url*: key改变发生的URL
- 【html5】html5 本地存储
- 【html5】html5 本地存储
- HTML5本地存储
- HTML5 LocalStorage 本地存储
- HTML5 本地存储初探
- HTML5本地存储
- HTML5本地存储
- HTML5 LocalStorage 本地存储
- html5 WebStorage本地存储
- HTML5 本地存储
- HTML5 本地数据存储
- HTML5本地存储
- HTML5之本地存储
- HTML5 本地存储
- HTML5 LocalStorage 本地存储
- HTML5本地存储详解
- HTML5 LocalStorage 本地存储
- HTML5 本地存储数据
- iOS面试题非技术面试(二)
- C++开发者都应该使用的10个C++11特性
- 在Android Studio添加SO library
- C++ 中的回调函数
- 动画(六)属性动画的工作原理
- Html5 本地存储
- Android还在用Toast?你Out啦,该试试Snackbar了
- Insert Interval
- Java多线程,并发编程等
- 天网恢恢,生物识别技术替天行道
- Apexで承認プロセスを操作
- sqlite第三方类库:FMDB使用
- iOS面试题非技术面试(三)
- SQL 判断临时表是不是存在的方法