jQuery/JS table dump to cookie

Question

Basicly i have to read content of HTML table and save this date in cookie. And next red this cookie to refill this same table ater page reload (in first table is generated in jquery)

So I have a HTML table

<table>
<tr>
<td>Name1</td>
<td>Value1</td>
</tr>
<tr>
<td>Name2</td>
<td>Value2</td>
</tr>
</table>

to save cookie i use

document.cookie = 'orderArray = '+table;

I have to save in cookie content of his cells in form:

name1:value1;name2:value2

If I will get this form of dump next I can explod in php to refill table. So, How make dump of this HTML table to this form or may some one have better idea?

Take a look at this: http://stackoverflow.com/questions/9927126/how-to-convert-the-following-table-to-json-with-javascript — Peter Dowdy, Apr 07 '14 at 15:29

score 0 · Answer 1 · answered Apr 07 '14 at 14:19

I would suggest you to use localStorage feature of html5 in stead of cookie.

get your table data and put it into an array. then store it in localstorage like.

var values = getTableData(); // this should return the array

window.localStorage.setItem(key, JSON.stringify(values));

to retrieve data

var values = JSON.parse(window.localStorage.getItem(key));

again localStorage has more advantage than cookie

score 0 · Answer 2 · answered Apr 09 '14 at 18:13

I can't use HTML5 features because I have to support IE8 :/.

But i solved this problem.

First I making an jQuery array. Next converting this to string using .toString() function and finally save to cookie.

    orderArray = [];
    var data = new Date();
    var days = 1;
    date.setTime(date.getTime()+(days*24*60*60*1000));
    expires = "; expires="+date.toGMTString();
    jQuery('table tr').each(function(){
        var name = jQuery(this).find('.sec').text();
        var qty = jQuery(this).find('input').attr('value');
        orderArray.push(name+"^"+qty);
    });
    document.cookie = 'orderArray = /'+orderArray.toString()+'/;'+expires;

I used slashes and certs in cookie data to easy read data after use .split() function

    table = document.cookie.split("/");     
    table = table[1].split(',');
    arrayInsert = 0;
        table.each(function(){
            tablee = table[arrayInsert].split("^"); 
            countOrderItems++   
            jQuery('table tbody').append('<tr><td>'+tablee[0]+'</td><td><input type="text" value="'+tablee[1]+'"></td><</tr>');
            arrayInsert++;
        });

I hope it's will be helpful for some else to :).

P.S. I made code litle shorter/simplest than in my page. I hope I didn't miss any piece of code

jQuery/JS table dump to cookie

2 Answers2