在APP中使用HTML5的本地存储功能

HTML5的本地存储功能可以用来保存APP重启之后的用户数据和一些常用设置。

在本文中，我们将讨论一下如何利用本地存储来增强Web APP的功能。

概述

HTML5的本地存储用来存储客户端的键值对。 这些键值对可以从源自于相同域的HTML页面中获取到。 本地存储的数据存储在磁盘上，并在整个应用程序重新启动仍然存在。

本地存储可以应用在像游戏这样的APP中，您可以保存游戏的进度，保存游戏的最高分，保存音频和视频时间戳。这些数据保存了之后，您就可以在游戏重启之后继续玩了。

JavaScript API

最基本的方法（ JavaScript* APIs） 设置和获取项目到/从存储为：

// store item
  localStorage.setItem("item_key", "value");

// retrieve item
  var data = localStorage.getItem("item_key");
 

像其他 JavaScript 对象，可以将本地存储对象视为一个关联数组。 而不是使用 getItem() 和 setItem() 方法，您可以简单地使用方括号。

例如，上面的代码片段也可以写成，

  // store item
  localStorage["item_key"]= value;

  // retrieve item
  var data = localStorage["item_key"];
  

下面是 （从 Hangonman 游戏） 的代码，它可以存储并检索的游戏状态，

function saveGameState ()
{
    localStorage["com.intel.hom.wrongGuesses"] = wrongGuesses;
    localStorage["com.intel.hom.rightGuesses"] = rightGuesses;
    localStorage["com.intel.hom.word"] = word;
    localStorage["com.intel.hom.gameType"] = gameType;
    localStorage["com.intel.hom.gameInProgress"] = gameInProgress;
}

function restoreGameState ()
{
    if (localStorage && localStorage["com.intel.hom.word"] &&
	localStorage["com.intel.hom.gameInProgress"] && (localStorage["com.intel.hom.gameInProgress"] === "true"))
    {
	wrongGuesses = localStorage["com.intel.hom.wrongGuesses"] || "";
	rightGuesses = localStorage["com.intel.hom.rightGuesses"] || "";
	word = localStorage["com.intel.hom.word"];
	gameType = localStorage["com.intel.hom.gameType"] || 0;
	gameInProgress = true;
    }
    else {
	initGameState();
    }
} 

不幸的是，目前的实现只支持字符串之间的映射，所以你需要做编组与其他数据结构 （如数组或 JavaScript 对象的字符串。

你可以使用 JSON.stringify() 和 JSON.parse() 方法。

var ArrayData = [5, 6, 9];
// store array to localstorage
localStorage.setItem("list_data_key",  JSON.stringify(ArrayData));

// retrieve stored data (JSON stringified) and convert
var storedData = localStorage.getItem("ArrayData ");
if (storedData) {
    ArrayData = JSON.parse(storedData);
} 

下面是一个示例还原设置，从 Hangonman 游戏：

function restoreSettings ()
{
    try {
        useSounds = JSON.parse(localStorage["com.intel.hom.useSounds"]);
    }
    catch (e) {
        useSounds = true;
        localStorage["com.intel.hom.useSounds"] = JSON.stringify(useSounds);
    }
}  

您可能会使用其他方法都是， removeItem 和 clear 正如下面，

// For removing single Key
localStorage.removeItem("item_key"); // where 'item_key' is the key of the value you want to remove

//  To clear all Local Storage
localStorage.clear();
 

关于 HTML5 存储 Api 的详细信息，请参阅以下资源：

• 文献资料： W3C 规范： Web 存储
• HTML5 岩石： 本地存储区
• 多布斯博士： HTML5 Web 存储
• HTML5 潜入： 存储
• 介绍了 HTML5 存储 Api
• HTML5 本地存储的基本知识