How to retain JQuery appended values after page refresh?

Question

How to retain JQuery appended values after page refresh? However every time I refresh the page, whatever that has been .append() disappears.

jQuery(document).ready(function(){

jQuery(window).load(function() { 
var amt1 = jQuery("form.cart_group").find(".component.paged:eq(0)").find("span.woocommerce-Price-amount.amount").text();

var single_amt = amt1.split("Rs.");
var amount1 = single_amt[1];
 jQuery(".widget_shopping_cart_content li.mini_cart_item").append("<div>Domain: Rs."+amount1+"</div><br/>"); 
});
});

You cant retain anything that has been added after page load, for next page refresh. It has to be stored somewhere else. Cookies or Localstorage might be a good idea — Hemal, Jan 25 '17 at 06:43
refer [Dynamic content retain after page refresh](http://stackoverflow.com/questions/24495001/retain-dynamically-generated-input-fields-via-jquery-after-refresh) Also refer [how to retain the div contents after page refresh](http://stackoverflow.com/questions/1694191/how-to-retain-the-div-contents-after-page-refresh) — Sorangwala Abbasali, Jan 25 '17 at 06:43
you can use hidden input fields to hold values then append them from the input fields. Input fields values don't clear out even after page refresh — Skykid Felix, Apr 18 '19 at 02:49

score 0 · Answer 1 · answered Jan 25 '17 at 06:52

There are few solutions to your problem.(i would go with cookie or local storage)

database-require server side support
a cookie(it's very easy to use this one)
a generated page (can be cached)
via an ajax query to get the page "changes"

easiest way to save content locally is with HTML5 LocalStorage.

You could save data to an object:

var prefs = {
    div1: {
        text: 'something',
        class: 'test',
        parent: '#left'
    },
    div2: {...},
    ...
}

and then save this object to localStorage:

localStorage.savedPrefs = JSON.stringify(prefs);

When the page loads, check this object and take action accordingly:

if ('savedPrefs' in localStorage) {
    prefs = JSON.parse(localStorage.savedPrefs);
    // change page based on prefs
    // e.g. alert('div1 text: ' + prefs.div1.text);
}

can you modify my code cause i dont understand properly. – Pradeep rajendiren Jan 25 '17 at 07:05 — Pradeep rajendiren, Jan 25 '17 at 07:05

Serak Shiferaw · Answer 2 · 2017-01-25T07:42:56.163

0

use localStorage to store and retrieve data on page refresh

jQuery(document).ready(function(){
jQuery(window).load(function() { 
    var amountStored;
    var amt1 = jQuery("form.cart_group").find(".component.paged:eq(0)").find("span.woocommerce-Price-amount.amount").text();
    var single_amt = amt1.split("Rs.");

    var amount1 = single_amt[1];
    if(!localStorage.getItem("amount")){
        localStorage.setItem("amount",amount1)
    }
    else{
        amountStored = 0;
    }
    var amountStored = localStorage.getItem("amount")
    jQuery(".widget_shopping_cart_content li.mini_cart_item").append("<div>Domain: Rs."+amountStored+"</div><br/>"); 
});

});

http://www.w3schools.com/html/html5_webstorage.asp

edited Jan 25 '17 at 07:42

answered Jan 25 '17 at 07:03

Serak Shiferaw

993
2
11
32

yes i have tried this one but if I refesh more than two time append values gets disappear and showing the value of zero. – Pradeep rajendiren Jan 25 '17 at 07:12
Even before I got the value if page has been refeshed append values gets disappears. but where as now append values itself coming zero. – Pradeep rajendiren Jan 25 '17 at 08:52

score 0 · Answer 3 · answered Jan 25 '17 at 07:47

0

You can add the item to localstorage this way

var value = "YOUR APPEND STRING";
localStorage.setItem("YourData" , value);

Later when you reload the page in future, get it with following

var data=localStorage.getItem("GetData");

answered Jan 25 '17 at 07:47

Hemal

3,682
1
23
54

How to retain JQuery appended values after page refresh?

3 Answers3