How to store this data in cookies?

问题

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

回答1:

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/

回答2:

I'd opt for using local storage (see http://www.w3schools.com/html/html5_webstorage.asp), seems more scalable than setting a cookie for each text input. Also, you mention that the values must be set with each keystroke, why not instead keep the value of the current input in memory, and bind a function which commits the value both to the blur event of the input, and also use setTimeout to impose, say, a 1 second delay on saving the value, queuing these timeouts in an array, and clearing outstanding ones on each keyup event, that way you're only writing to the local storage when the user pauses typing, not with every keystroke.

回答3:

Use jquery-storage for saving the values https://github.com/julien-maurel/jQuery-Storage-API/blob/master/README.md

Its really simple

$.localstorage.set(inputfield, value)

For setting

$.localstorage.get(inputfield)

For retrieving.

Cookies are often abused for this purpose but cookies get sent to the server on every request. So storing a ton of data in cookies is not a good idea.

Localstorage however was designed for this purpose and is a simpe key value storw in the browser.

Please note that it is a html5 feature and will not work in some older browsers

To circumvent this you can use the cookiestorage provided by jquery storage. But then you also need to include the extra dependencies mentionend in the readme.md

Then use it like this:

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

来源：https://stackoverflow.com/questions/23740411/how-to-store-this-data-in-cookies

标签

javascript

jquery

html