HTML5本地存储

摘自 http://diveintohtml5.info/storage.html

 

什么是HTML5存储?

简单地说,它是一种让web页面在浏览器端本地化存储键值对的方式。跟cookies一样,即使你从网站导航到别的网站,关掉了浏览器的tab页,退出了浏览器,数据依然存在;与cookies不同的是,数据绝不会被发送到远程服务器上。

 

示例:检测是否存在HTML5存储

自己编写代码

function supports_html5_storage() {
  try {
    return ‘localStorage‘ in window && window[‘localStorage‘] !== null;
  } catch (e) {
    return false;
  }
}

使用Modernizr

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for HTML5 storage :(
  // maybe try dojox.storage or a third-party solution
}

 

如何使用HTML5存储数据?

HTML5存储基于key/value对,依据key来存储数据,再依据key来取数据。

  • key:字符串类型。
  • value:任何JavaScript支持的类型,包括strings, Booleans, integers, floats。

然而value实际上是以字符串的形式存储的,所以如果你要存储任何string类型以为的数据,你需要使用 parseInt()parseFloat() 函数来强制转化类型。

 

存储接口

Storage接口之 getItem(), setItem()

interface Storage {
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
};

调用 setItem() 时使用已存在的key会覆盖之前value的内容,调用 getItem() 时使用不存在的key会返回null。
跟其他JavaScript对象一样,你可以把localStroage对象当作一个关联数组,使用方括号来替代 getItem() 与 setITem():

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

可以被替换成方括号语法:

var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

 

Storage接口之 removeItem(), clear()

interface Storage {
  deleter void removeItem(in DOMString key);
  void clear();
};

调用 removeItem() 时如果key不存在不会有任何效果。

 

Storage接口之 length属性,每个key的名称

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
};

如果你调用 key() 但是index不在(0 - (length-1))的范围内,函数将返回null.

 

另外HTML最多支持5M本地存储,超出会引发“QUOTA_EXCEEDED_ERR”异常,且不能申请新的存储空间。

 

如何跟踪HTML5存储区的更改?

如果你想要用代码跟踪什么时候存储区域发生了改变,你可以捕获storage事件。无论是调用了setItem(),removeItem()还是clear(),只要发生了更改,storage事件就会被触发。

任何支持localStorage的地方都支持storage事件。也包括不支持W3C标准addEventListener的IE8。所以为了hook这个storage事件,需要检查浏览器支持什么事件机制。

捕获storage事件跟捕获其他事件一样,也可以用jQuery或其他JavaScript库来注册event handlers。

if (window.addEventListener) {
  window.addEventListener("storage", handle_storage, false);
} else {
  window.attachEvent("onstorage", handle_storage);
};

handle_storage回调函数将会被调用,并传入一个StorageEvent对象,除了IE的事件对象存储在 window.event 当中。

function handle_storage(e) {
  if (!e) { e = window.event; }
}

至此,变量e将会变成StorageEvent对象,并拥有以下有用的属性:

属性 类型 描述
key string 添加、移除或修改的key的名称
oldValue any 之前的值(现在已经被覆盖了),如果是新添加的item则是null
newValue any 新的值,如果是被移除则为null
url*/uri* string 调用方法触发更改的页面

storage事件不能被取消。

 

HTML5实战

保存游戏状态:

function saveGameState() {
    if (!supportsLocalStorage()) { return false; }
    localStorage["halma.game.in.progress"] = gGameInProgress;
    for (var i = 0; i < kNumPieces; i++) {
    localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
    localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
    }
    localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
    localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
    localStorage["halma.movecount"] = gMoveCount;
    return true;
}

恢复游戏状态:

function resumeGame() {
    if (!supportsLocalStorage()) { return false; }
    gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
    if (!gGameInProgress) { return false; }
    gPieces = new Array(kNumPieces);
    for (var i = 0; i < kNumPieces; i++) {
    var row = parseInt(localStorage["halma.piece." + i + ".row"]);
    var column = parseInt(localStorage["halma.piece." + i + ".column"]);
    gPieces[i] = new Cell(row, column);
    }
    gNumPieces = kNumPieces;
    gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
    gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
    gMoveCount = parseInt(localStorage["halma.movecount"]);
    drawBoard();
    return true;
}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。