HTML5 - 本地存储、Cookie 和 SQL

Question

根据我在 SO 上看到的大量搜索结果，HTML5 的 localStorage 功能似乎比 Cookie 更有优势，仅当您关心存储不需要传输到服务器的大部分数据时。 (Local Storage vs Cookies)

我很难理解人们如何/为什么会使用此功能。谁能提供一个真实示例的链接来说明 localStorage 的好处？

另外，是否有过使用 localStorage 的情况……比如说……将某些信息写入 SQL 数据库？

抱歉，这与本网站上无数 HTML5 问题的重复。我已经阅读了一些，但没有一个人完全回答了我的问题。提前致谢！

Answer 1

localStorage 是存储应用程序设置的好地方，您希望在会话之间保留这些设置（而不是 sessionStorage），而不是传输到服务器（而不是 cookie）。以前，为了避免将基于 cookie 的设置不必要地传输到服务器，您必须为 cookie 使用不同的子域。

下一个重要的优势是，虽然 localStorage 使用 SQLite，但所有 localStorage 值都由浏览器缓存在内存中。因此，虽然使用数据库 API，每个 executeSql 语句都是异步的，并且需要回调函数来获取数据，但 localStorage 是完全同步的，因为它直接从内存缓存中获取数据。这意味着从 localStorage 存储和检索大块数据的速度非常快。

localStorage 对象的实现方式也使得在您的代码中使用起来非常简单直观。例如，您是否知道，除了使用 getItem 和 setItem 之外，您还可以像使用任何其他对象一样使用 localStorage？

localStorage.someKeyName = 'someValue';
alert(localStorage.someKeyName); // alerts 'someValue'
delete localStorage.someKeyName; // removes the key

将此与从数据库中检索单个记录所需的代码量进行比较：

var db = openDatabase('myDb', '', '', 1024);
db.compatibleReadTransaction(function (t) {
    t.executeSql('SELECT someField FROM someTable WHERE somePrimaryKey = 1', function(t, r) {
        console.log(r.rows.item(0));
    }, function () {
        // error
    });
});

真实示例

g.joeblade.com 的 Guardian 网络应用程序将所有文章内容存储在 localStorage 中。这意味着页面加载是即时的。如果内容要存储在数据库中，它就不会像必须从数据库中异步获取每篇文章那样快，而且还有调用 SQLite 查询引擎、运行回调等的开销开。