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

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多个文本框或文本区域（不考虑可用性/用户体验）。 这会引起任何问题吗？

我愿意接受任何建议/替代方案

Answer 1

我选择使用本地存储（请参阅http://www.w3schools.com/html/html5_webstorage.asp ），它似乎比为每个文本输入设置cookie更具可扩展性。 另外，您提到必须在每次击键时设置值，为什么不将当前输入的值保留在内存中，并绑定一个将值同时提交给输入的模糊事件的函数，并使用setTimeout进行设置，例如，在保存值，在数组中排队这些超时以及在每次按键事件上清除未解决的超时时，将延迟1秒，这样，您只在用户暂停键入时才写入本地存储，而不是每次击键都写入本地存储。

Answer 2

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

在提供的代码段中，您已将keykey事件中的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/

进一步阅读：

本地存储： 在HTML5 localStorage中存储对象

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

使用JSON序列化： 在jQuery中序列化为JSON

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中存储大量数据不是一个好主意。

但是，本地存储是为此目的而设计的，它是浏览器中的一个简单键值存储。

请注意，这是html5功能，在某些较旧的浏览器中将无法使用

为了避免这种情况，您可以使用jquery存储提供的cookiestorage。 但是，然后您还需要在readme.md中包含额外的依赖提到的endend。

然后像这样使用它：

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