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

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

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

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

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

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

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

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

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(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. Java Concurrency - 取消线程执行器中的线程

    When you work with an executor, you don't have to manage threads. You only implement the Runnable or ...

  2. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  3. jquery 事件委托绑定click的使用方法

    直接绑定ul的click事件  代码如下 复制代码 $("ul").click(function(e) 例子  代码如下 复制代码 $(function(){ //$(" ...

  4. Windows Forms (一)

    导读 1.什么是 Windows Forms 2.需要学Windows Forms 么? 3.如何手写一个简单的Windows Forms 程序 4.对上面程序的说明 5.Form 类与Control ...

  5. C# 线程--第三线程池

    概述 线程池有那些优点: 1.在多线程中线程池可以减少我们创建线程,并合理的复用线程池中的线程.因为在线程池中有线程的线程处于等待分配任务状态. 2.不必管理和维护生存周期短暂的线程,不用在创建时为其 ...

  6. (转)C# 数据类型映射 (SQLite,MySQL,MSSQL,Oracle)

    一.C# vs SQLite: C# SQLite 字段名 类型 库类型 GetFieldType(#) 转换 备注 F_BOOL bool BIT NOT NULL Boolean F_BOOL_N ...

  7. 巧用Systemtap注入延迟模拟IO设备抖动

    原创文章,转载请注明: 转载自系统技术非业余研究 本文链接地址: 巧用Systemtap注入延迟模拟IO设备抖动 当我们的IO密集型的应用怀疑设备的IO抖动,比如说一段时间的wait时间过长导致性能或 ...

  8. java 枚举 类 enum

    public abstract class Enum<E extends Enum<E>> implements Comparable<E>, Serializab ...

  9. JQuery的过滤选择器

    1.eg(num):查找索引num位置的元素,索引从0开始. 2.lt(num):查找索引小于num位置的元素,索引从0开始. 3.gt(num):查找索引大于num位置的元素,索引从0开始. 示例: ...

  10. $设置背景图片的css

    $('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');