如何将这些数据存储在cookie中? [英] How to store this data in cookies?

问题描述

比方说，我有一些文本框/文本区域，必须存储其值.这些值必须在按键时存储，以便在用户过早关闭页面时不会丢失任何数据.这是我当前的代码(使用Cookie):

  function createCookie(名称，值，天数){如果(天){var date = new Date();date.setTime(date.getTime()+(天* 24 * 60 * 60 * 1000));var expires =';expires ='+ date.toGMTString();} else var expires ='';document.cookie =名称+'='+值+到期时间+';路径=/';}$('input').keyup(function(){var $ this = $(this);createCookie($ this.attr('name')，$ this.val()，1);}); 

jsFiddle

这很好.

仅使用4个文本框，我看不到任何问题，但可以想象拥有50多个文本框或文本区域(不考虑可用性/用户体验).这会引起任何问题吗?

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

解决方案

杰米(Jamie)建议使用本地存储是一种非常好的方法，如果不支持本地存储，则可以将cookie用作备用.

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

 //保存数据通用功能函数saveData(){var dataObj = JSON.stringify($("input，textarea").serializeObject());如果(！Modernizr.localstorage){saveToLocalStorage(dataObj);} 别的 {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/

Let's say i have some textboxes/textareas of which the values have to be stored. The values have to be stored on key press, so that no data is lost when the user closes the page too early. Here's my current code (using cookies):

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

This works great.

With just 4 textboxes i see no problems but imagine having 50+ textboxes or textareas (not accounting usability/user experience). Will this cause any problems?

I'm open to any suggestions/alternatives

解决方案

As Jamie suggested local storage is a really good approach, cookies could be used as a fallback if Local Storage is not supported.

On the snippet you have provided you have binded the cookie rewrite process in the keyup event, in order to avoid any data loss. I have implemented a more neat solution , when the user unloads the window I have tried to serialise the form data and store it.

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

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

Modernizr is used to detect when local storage is available. Furthermore , I have found that using separate cookies for each field is an overkill, I have used a single JSON string instead.

Full jsFiddele example: http://jsfiddle.net/ARUM9/5/

Further reading:

Local storage :Storing Objects in HTML5 localStorage

Local storage browser support: http://caniuse.com/#search=localstorage

Using JSON serialisation : Serializing to JSON in jQuery

Modernizr documentation: http://modernizr.com/docs/

这篇关于如何将这些数据存储在cookie中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！