Add table row in javascript that survives F5 keypress

Question

I want to add a table row dynamically in javascript and jQuery.

One solution for this would be:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

(see: SO: Add table row in jQuery )

This solution has a big disadvantage: it doesn't survive a browser refresh (F5, Ctr-r keys or pressing the refresh button in the browser tab).

Is there a solution to make the added table row (and also the data that was added by the user in input fields) independant from a browser refresh?

Remark: disabling the F5 button and similar things is not an alternative.

The only way you can keep the row is either by storing it in a database or a browser cookie and read from that on page load. — asprin, Nov 25 '16 at 03:59
It must be persisted *somewhere*. Local storage, a server, something. — jdphenix, Nov 25 '16 at 03:59
i vote for storing it in local storage and then on page load reading from local storage — gavgrif, Nov 25 '16 at 04:00
If it doesn't "survive" a page refresh, that means that the data used to create the page does not include this new row. As mentioned by others, there are at least 3 solutions, database (or some server side change to the data that is used to create the page), cookie or localStorage (a browser concept, not a local file). The one that makes most sense to me is server side change when the row is added, this would require the browser to send some indication that there is to be a new row, including the data present in this new row. — Jaromanda X, Nov 25 '16 at 04:15
Further to the above. If the point of the exercise is to avoid data loss in the event that a user "accidentally" presses the F5 key before having committed whatever changes to the server (through a form, or whatever, as you've provided no indication of page function, I'm guessing) - you can use the `beforeunload` event to warn the user of unsaved changes, then it is up to the user to decide if they proceed and lose the changes they've made, or cancel the refresh. — Jaromanda X, Nov 25 '16 at 04:18

score 0 · Answer 1 · edited Nov 25 '16 at 04:03

0

I think you can use

localStorage.setItem('variableName', value)

and then get it with

localStorage.getItem('variableName').

Hope this helps.

edited Nov 25 '16 at 04:03

asprin

9,579
12
66
119

answered Nov 25 '16 at 04:01

Simeon Vanov

361
3
13

Browser support information is important too. Perhaps you should mention that. – asprin Nov 25 '16 at 04:03
It looks like all the modern browsers support it: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#localStorage – Simeon Vanov Nov 25 '16 at 04:12
Support through IE8? That's surprising. – asprin Nov 25 '16 at 04:16
1

IE8 is full of surprises ... the greatest of which is that it is still being used! – Jaromanda X Nov 25 '16 at 04:19

score 0 · Answer 2 · answered Nov 25 '16 at 07:27

you could use cookies, an example would be this:
when the table row is set

document.cookie("Row=" + row); //row is your table row variable

on refresh/page load (F5)

function getRow() {
var name = "Row"+ "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') {
        c = c.substring(1);
     }
     if (c.indexOf(name) == 0) {
        return c.substring(name.length,c.length);
     }
 }
return "";

}

score 0 · Accepted Answer · answered Nov 25 '16 at 09:52

When you manipulate the DOM objects with Javascript you are doing so in the client browser's memory. Hitting F5 will reload the page and loose every changes in that memory.

To make your changes survive an F5 you have to store them somewhere other than the client's memory. To do so you have various options. The best option depends on your application design and needs.

Database: Very usefull especially when the data you are manipulating needs to be shared among various users. If your applications has a user system and your changes are shared among users you need to store those changes in a centralized environment (such as a Database on a server) so that every user can access and see those changes.
Cookies and localStorage: If the application is intended to work as a black-box (each user sees only his own data) you can work locally with cookies or storages. By the end of the session you can send all local data to the server database as well, if you'd like to keep a centralized copy.

Add table row in javascript that survives F5 keypress

3 Answers3