HTML5的本地存储 LocalStorage
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的更多相关文章
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- HTML5之本地存储localstorage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- HTML5本地存储 localStorage
HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- Cocos本地存储LocalStorage
HTML5 LocalStorage 本地存储 //存档 var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSav ...
随机推荐
- Apache Commons 简述
Apache Commons 是一个关注于可复用的 Java 组件的 Apache 项目.Apache Commons 由三部分构成: Commons Proper - 一个可复用的 Java 组件库 ...
- 有些方法为什么会声明称static静态的
有些方法在调用的时候,没有必要都要先实例化一下,只需要:[类名. 静态方法 ]就行了. 哪些方法的调用没有必要实例化呢?网上找了个例子: 举个例子:Car类,1.静态方法Run(),Car.Run() ...
- C# 正则表达式（一）
首先来复习一下正则表达式的基础知识,本篇文章分为2个部分,第一个部分复习正则表达式中的元字符和简写表达式,第二部分复习正则表达式的匹配和提取. 1.正则表达式中的元字符和简写表达式 ".&q ...
- js判断输入字符串长度（汉字算两个字符，字母数字算一个）
js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head&g ...
- CICS日志---内存问题
Level 9 COCITOOL_XA: Connected! [2014-01-09 19:46:24.296834][22347888] Level 0 TestPerormence: GDAO ...
- DB Cache Reloaded Fix缓存不能被激活解决方法
1.创建wp-content/plugins/db-cache-reloaded-fix/cache目录. 2.将cache权限改为777. 3.拷贝wp-content/plugins/db-cac ...
- ECSSHOP表结构
ECSSHOP表结构 -- 表的结构 `ecs_account_log`CREATE TABLE IF NOT EXISTS `ecs_account_log` (`log_id` mediumint ...
- ng-src作用
... <ul class="phones"> <li ng-repeat="phone in $ctrl.phones | filter:$ctrl. ...
- CSS3 弹性盒布局模型(转)
简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...
- 配置ADB 工具 (Win7_64)
ADB (Android Debut Bridge) ADB这个工具, 让我们可以用电脑来操纵手机 Android studio 安装好之后在SDK 中就有ADB 但是我们想使用它还需要配置它的环境变 ...