六、在浏览器中存储数据
客户端数据存储是对离线应用的自然补充。HTML5 定义了一些用于在浏览器中存储数据的有用的 JavaScript APIs，从简单的名称/值对到使用 JavaScript 对象数据库。在本章中，我将向您展示如何构建依赖持久存储数据的应用，包括如何在离线 web 应用中使用这些数据的细节。
注意浏览器对数据存储的支持喜忧参半。您应该使用 Google Chrome 运行本章中的示例，但 IndexedDB 部分的示例除外，它们只能在 Mozilla Firefox 中运行。
使用本地存储
在浏览器中存储数据最简单的方法是使用 HTML5 本地存储特性。这允许您存储简单的名称/值对，并在以后检索或修改它们。数据会永久存储，但不能保证永远存储。如果需要空间(或者如果数据很长时间没有被访问)，浏览器可以自由删除你的数据，当然，用户可以随时清除数据存储，即使你的 web 应用正在运行。其结果是数据是广泛持久的，但不是无限持久的。使用本地存储非常类似于使用常规的 JavaScript 数组，如清单 6-1 所示。
清单 6-1。使用本地存储
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.js" type="text/javascript"></script>
<script src='knockout-2.0.0.js' type='text/javascript'></script>
<script src='utils.js' type='text/javascript'></script>
<script src='signals.js' type='text/javascript'></script>
<script src='crossroads.js' type='text/javascript'></script>
`
var viewModel = {
items: ["Apple", "Orange", "Banana"],
selectedItem: ko.observable("Apple")
};
$(document).ready(function() { ko.applyBindings(viewModel);
$('div.catSelectors').buttonset();
hasher.initialized.add(crossroads.parse, crossroads); hasher.changed.add(crossroads.parse, crossroads); hasher.init();
crossroads.addRoute("select/{item}", function(item) { viewModel.selectedItem(item); localStorage["selection"] = item; }); viewModel.selectedItem(localStorage["selection"] || viewModel.items[0]); });
版权属于：月萌API www.moonapi.com，转载请注明出处
