javascript - Web 应用数据存储

Question

假设我有两个或更多带有几个输入和文本区域的选项卡。用户可以填写这些字段并切换选项卡，但我想确保他们不会丢失字段中的数据。

问题来了：当用户在标签之间切换时，你将如何保存数据？现在我通过将数据存储在变量中解决了这个问题，特别是在对象文字（Javascript）中，但这是一种机械的方式。

当然，我可以将数据推送到数据库中。

我正在使用 Javascript 和 jQuery。我真的很想想一个解决这类问题的好方法。

Answer 1

您可以使用localStorage.

只需通过以下方式设置您要存储的值：

localStorage.setItem(key, stringData);

要获取数据：

var stringData = localStorage.getItem(key);

删除：

localStorage.removeItem(key);

这样，数据就本地存储在用户的浏览器中。用户也可以稍后再回来，数据仍然存在。

您可以通过监听storage事件来同步选项卡：

window.addEventListener('storage', updateStorage, false);

function updateStorage(e) {

    if (e.newValue === null) {
        localStorage.removeItem(e.key);

    } else {
        localStorage.setItem(e.key, e.newValue);
    }

}

该storage事件仅被抛出到非活动选项卡，因此它们可以更新localStorage.

如果您只需要存储会话的数据，则可以sessionStorage改用。

有关更多信息localStorage：
http ://www.w3.org/TR/2013/PR-webstorage-20130409/