localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存

储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也

带来了更强大的本地存储,最多可存储大小5M的字符串,足可以满足大部分的web应

用,比cookie的4K要大出不少,还有一个sessionStorage,功能基本与localStorage

相同,看名字便知与sesstion一样,关闭浏览器即失效。

以前有用过cookie的都了解cookie的存储读取方式都不太优雅,需要自己封装set get方

法,而localStorage则方便许多,localStorage 是作為window的一个属性存在的,拥

有setItem,getItem,removeItem,clear等方法,相当方便。

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服

务器里运行),支持情况如下图:

如下代码即可判断浏览器是否支持

if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}

localStorage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样

用点操作符,及[]的方式进行数据存储,像如下的例

var storage = window.localStorage;
storage.a = "haha";
storage["b"] = "hehe";
var a = storage.a;
var b = storage["b"];

  另外,localStorage还提供了一个key()方法,配合localStorage的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>");
}
}

  FF里

storage.key(i) == storage

  , 算个BUG吧

HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用

方法如下:

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}

  对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察

键值对的变化,如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

写一个最简单的,利用本地存储的计数器,有一个需要注意的地方是不管setItem里传什

么类型,最终都会被转成string,所以getItem的时候需要转类型:

<!doctype HTML>
<html>
<head>
</head>
<body >
<div id="c"></div>
<script>
var storage = window.localStorage;
if(!storage.getItem("num")){
storage.setItem("num",0);
}
var n = parseInt(storage.getItem("num"))+1;
storage.setItem("num",n);
document.getElementById("c").innerHTML = "这里显示的是计数结果:" + n;
</script>
</body>
</html>

  

HTML5的本地存储 LocalStorage的更多相关文章

  1. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  2. HTML5之本地存储localstorage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  3. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  4. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  5. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  6. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  7. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  8. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. Cocos本地存储LocalStorage

    HTML5 LocalStorage 本地存储 //存档 var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSav ...

随机推荐

  1. CXF(2.7.10) - RESTful Services, JSON Support

    在 CXF(2.7.10) - RESTful Services 介绍了 REST 风格的 WebService 服务,数据传输是基于 XML 格式的.如果要基于 JSON 格式传输数据,仅需要将注解 ...

  2. Linux 命令 - passwd: 更改用户密码

    命令格式 passwd  [-k]  [-l]  [-u  [-f]] [-d] [-e] [-n mindays] [-x maxdays] [-w warndays] [-i inactiveda ...

  3. HDOJ2028Lowest Common Multiple Plus

    Lowest Common Multiple Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  4. Debian8 加载NTFS 磁盘出错 解决方法

    执行 ntfsfix  /dev/sdb2 // sd*  a代表第一块硬盘 b代表第2块硬盘 数字是分区号 执行后 就可以正常使用了.

  5. 【转】预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)

    用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反) 解决方法: 建工程时 建立空项目 或者在项目设置里关闭预编 ...

  6. 解释清楚c++的重载操作符【用自己的话,解释清楚】

    C++中对于内置的变量及标准库中常见的类定义类常见的操作符含义,对于自定义的类也可以通过关键字operate 重载操作符的含义. C++中支持重载的目的 诚然操作符的重载可以通过使用函数实现同样的功能 ...

  7. 第四十四篇、iOS开发中git添加.gitignore文件

    .gitignore文件可以直接使用https://github.com/github/gitignore 1.在项目中设置忽略文件(1)将从github上荡下来的对应的.gitignore文件(Sw ...

  8. MD5和Base64介绍与应用

    MD5:概念:MD5是一种不可逆的消息摘要算法.为计算机安全领域广泛使⽤的一种散列函数, 用以提供消息的完整性保护.效果:把一个任意长度的字节串变换成⼀定⻓度的⼗六进制数字串. 目的是让⼤容量信息在⽤ ...

  9. Swift中的循环语句

    循环语句能够使程序代码重复执行.Swift编程语言支持4种循环构造类型:while.do while.for和for in.for和while循环是在执行循环体之前测试循环条件,而do while是在 ...

  10. int/double/string使用

    在计算机中存储数据和儿童在抽屉中存放物品很类似. 例如: 要在计算机中存一个数字50,需要两句话. int a;  //将要放的物品告诉家长 a=50;  //将物品放到某个抽屉中 计算机存储变量的过 ...