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演示facade(外观)模式

    实际应用中,原来的代码涉及多个子系统时,重新进行类的设计,将原来分散在源码中的类结构及方法重新组合,形成新的.统一的接口,供上层应用使用. Facade所面对的往往是多个类或其它程序单元,通过重新组合 ...

  2. 对XML的操作

    对XML的操作主要使用到的语法示例: using System.Xml; private static string XmlMarketingStaff = AppDomain.CurrentDoma ...

  3. AngularJS Boostrap Pagination Sample

    首先,样式是这样的 首先,Service端是Webapi REST JSON格式 第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...

  4. (转载)Nim游戏博弈(收集完全版)

    Nim游戏的概述: 还记得这个游戏吗?给出n列珍珠,两人轮流取珍珠,每次在某一列中取至少1颗珍珠,但不能在两列中取.最后拿光珍珠的人输.后来,在一份资料上看到,这种游戏称为“拈(Nim)”.据说,它源 ...

  5. Cocos开发中性能优化工具介绍之使用Windows任务管理器

    说到Windows平台,我们很快就想到了Visual Studio 2012,然而Visual Studio 2012在这方面没有很好的工具.如果我们只是想知道大体上内存.CPU等在某一事件前后变化情 ...

  6. Visual Studio下SQLite数据库开发环境设置

    由于我们介绍的内容都是基于微软的Visual Studio下开发的Win32平台,所以下边我们介绍Visual Studio下SQLite数据库开发环境设置.具体而言我们有两种方式可以在Visual ...

  7. Sql Server 维护计划 备份覆盖

            之前在设置服务器Sql Server 维护计划 备份的sql server 数据库,都是累加的,后来也没有仔细看过,后台回过头来考虑到服务器的存储空间,只好做sql server 数据 ...

  8. 有道单词本添加js实现自动阅读单词

    个人比较习惯使用有道,使用了一段时间,背单词的时候很不方便   而有道单词客户Duan没有自动阅读的功能,  本菜用强大的js实现了简单的自动下一个单词的功能, 方法:第一步打开有道路径下的" ...

  9. 一些常用sqlite语句

    1,如果表不存在就新建一个 CComBSTR bstrCreatBat(L”CREATE TABLE IF NOT EXISTS tb_Name (\ rowIdIndex  INTEGER PRIM ...

  10. 阅读《Oracle内核技术揭秘》的读书笔记

    阅读<Oracle内核技术揭秘>,对oracle的内存结构.锁.共享池.undo.redo等整理成了如下的思维导图: