HTML5 LocalStorage 本地存储
来源:互联网 发布:centos simsun.ttc 编辑:程序博客网 时间:2024/06/07 17:35
首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:
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本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。
看下图:
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- html5本地存储localStorage
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- 【学习笔记】hibernate相关(1)Criteria接口
- JS中回调函数的写法
- Java编程思想(第四版)笔记(三)
- HandlerSocket简介以及php使用handlersocket
- MySQL数据库之插入显示图片
- HTML5 LocalStorage 本地存储
- HTTP遇到的安全问题&&HTTPS解决的问题
- Gson解析Json数据内有非法字符("",回车,etc)时的解决办法
- 125. Valid Palindrome
- js里的[]和{}
- SDNU1331 二分法求,确定划分次数后的最小连续区间和
- android实现仿QQ登陆界面的多账号保存
- 用js获取当前页面的url
- Tair-淘宝自主开发的一个分布式key/value存储系统