Question

假设我有一些文本框/文本区域，其值必须存储。这些值必须存储在按键上，以便在用户过早关闭页面时不会丢失任何数据。这是我当前的代码（使用Cookie）：

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = '; expires=' + date.toGMTString();
    } else var expires = '';
    document.cookie = name + '=' + value + expires + '; path=/';
}

$('input').keyup(function () {
    var $this = $(this);
    createCookie($this.attr('name'), $this.val(), 1);
});

jsFiddle

这很有效。

只有4个文本框，我看到没有问题，但想象有50多个文本框或textareas（不计算可用性/用户体验）。这会导致任何问题吗？

我对任何建议/替代方案持开放态度

Answer 1

我选择使用本地存储（请参阅http://www.w3schools.com/html/html5_webstorage.asp），似乎比为每个文本输入设置Cookie更具可扩展性。另外，你提到必须在每次击键时设置值，为什么不将当前输入的值保存在内存中，并绑定一个将值提交给输入的blur事件的函数，并使用setTimeout强制执行比方说，保存值的时间延迟1秒，将这些超时排在一个数组中，并清除每个键盘事件中的优秀事件，这样您只需在用户暂停键入时写入本地存储，而不是每次击键。

Answer 2

正如Jamie所说，本地存储是一种非常好的方法，如果不支持本地存储，则可以将cookie用作后备。

在您提供的代码段中，您已在keyup事件中绑定了Cookie重写过程，以避免任何数据丢失。我已经实现了一个更简洁的解决方案，当用户卸载窗口时，我试图序列化表单数据并存储它。

//save data generic function
function saveData() {
    var dataObj = JSON.stringify($("input,textarea").serializeObject());

    if (!Modernizr.localstorage) {
        saveToLocalStorage(dataObj);
    } else {
        createCookie("jsonobj", dataObj, 1);
    }
}

Modernizr用于检测本地存储何时可用。此外，我发现为每个字段使用单独的cookie是一种矫枉过正，我使用了一个JSON字符串。

完整的jsFiddele示例：http://jsfiddle.net/ARUM9/5/

进一步阅读：

本地存储：Storing Objects in HTML5 localStorage

本地存储浏览器支持：http://caniuse.com/#search=localstorage

使用JSON序列化：Serializing to JSON in jQuery

Modernizr文档：http://modernizr.com/docs/

Answer 3

使用jquery-storage保存值https://github.com/julien-maurel/jQuery-Storage-API/blob/master/README.md

非常简单

$.localstorage.set(inputfield, value)

用于设置

$.localstorage.get(inputfield)

用于检索。

Cookie通常会被滥用，但Cookie会在每次请求时发送到服务器。因此，在cookie中存储大量数据并不是一个好主意。

然而，

Localstorage是为此目的而设计的，在浏览器中是一个简单的键值。

请注意，它是html5功能，在某些旧版浏览器中无法使用

为了避免这种情况，您可以使用jquery存储提供的cookie存储。但是，您还需要在readme.md

中包含提及的额外依赖项

然后像这样使用它：

var store = $.localstoreage || $.cookiestorage:
 store.set(...........

如何将这些数据存储在cookie中？

3 个答案: