logo
down
shadow

Saving form data to local storage and show it on refresh


Saving form data to local storage and show it on refresh

By : user2953566
Date : November 21 2020, 01:01 AM
hop of those help? You are complicating your script. Try this. Working JSFIDDLE
If you are using jQuery once, do not mix it with pure javascript, like document.getElementById(). And do not create a height variable to store the $('#height').val(), you can use this directly. Code is more readable.
code :
$(document).ready(function() {
    $(window).unload(saveSettings);
    loadSettings();
});

function loadSettings() {
    $('#height').val(localStorage.height);
    $('#weight').val(localStorage.weight);
    $('#dateOfBirth').val(localStorage.dateOfBirth);
    $('input[value="' + localStorage.gender + '"]').prop('checked', true);
    $("#sportive").val(localStorage.sportive);
}

function saveSettings() {
    localStorage.height = $('#height').val();
    localStorage.weight = $('#weight').val();
    localStorage.dateOfBirth = $('#dateOfBirth').val();
    localStorage.sportive = $("#sportive").val();
    localStorage.gender = $('input[type=radio]:checked').val();
}
$(window).on('unload', function(){
    saveSettings();
    loadSettings();
});


Share : facebook icon twitter icon
Need direction: saving form instances to local storage

Need direction: saving form instances to local storage


By : Will Dembinski
Date : March 29 2020, 07:55 AM
like below fixes the issue I've created a page that saves a form to local storage as JSON. It works as-is, but I want to extend it to save multiple days: http://daverau.info/happy/ , Instead of saving the object data as I found it below:
code :
[
    { "selector": "input[name=\"gratitude1\"]", "val": "" },
    { "selector": "input[name=\"gratitude2\"]", "val": "" },
    { "selector": "input[name=\"gratitude3\"]", "val": "" },
    { "selector": "textarea[name=\"journal\"]", "val": "" },
    { "selector": "input[name=\"exercise_num\"]", "val": "" },
    { "selector": "input[name=\"meditation_num\"]", "val": "" },
    { "selector": "input[name=\"kindness\"]", "val": "" },
    { "selector": "input[name=\"tdate\"]", "val": "2012-3-23" }
]
[
    { "2012-3-22" :
        [
            { "selector": "input[name=\"gratitude1\"]", "val": "" },
            { "selector": "input[name=\"gratitude2\"]", "val": "" },
            { "selector": "input[name=\"gratitude3\"]", "val": "" },
            { "selector": "textarea[name=\"journal\"]", "val": "" },
            { "selector": "input[name=\"exercise_num\"]", "val": "" },
            { "selector": "input[name=\"meditation_num\"]", "val": "" },
            { "selector": "input[name=\"kindness\"]", "val": "" }
        ]
    },
    { "2012-3-23" :
        [
            { "selector": "input[name=\"gratitude1\"]", "val": "" },
            { "selector": "input[name=\"gratitude2\"]", "val": "" },
            { "selector": "input[name=\"gratitude3\"]", "val": "" },
            { "selector": "textarea[name=\"journal\"]", "val": "" },
            { "selector": "input[name=\"exercise_num\"]", "val": "" },
            { "selector": "input[name=\"meditation_num\"]", "val": "" },
            { "selector": "input[name=\"kindness\"]", "val": "" }
        ]
    }
]
Saving data using Local Storage

Saving data using Local Storage


By : MOHAMMED SHIRAZ Huss
Date : March 29 2020, 07:55 AM
seems to work fine The localStorage is called like that because it can be accessed only locally. So you cannot use it to share the data across different clients. You need to use some server to store the data and provide it to your users.
Saving HTML form data to local storage

Saving HTML form data to local storage


By : Paul Harrington
Date : March 29 2020, 07:55 AM
it helps some times It looks like the selector for your email input is wrong, try changing it to:
code :
var stuff = $('#email').val();
<input id="email" type="email" value="" placeholder="Join Update List Here" class ="newsletter-email" />
$(document).on("click", ":submit", function(e) {
  var stuff = ($('#email').val());
    // Load emails
  var emails = JSON.parse(localStorage.getItem('EmailsStuff'));
  if (emails) {
    // If the item exists in local storage push the new email address to the array and and save
    emails.push(stuff);
    localStorage.setItem('EmailsStuff', JSON.stringify(emails));
  } else {
    // If the item doesn't exist in local storage set the item to a new array containing new email address
    localStorage.setItem('EmailsStuff', JSON.stringify([stuff]));
  }
});

$(document).on("click", "#loadEmail", function(e) {
  alert(JSON.parse(localStorage.getItem('EmailsStuff')));
});
Show local storage on page load/refresh in OL

Show local storage on page load/refresh in OL


By : Will Acton
Date : March 29 2020, 07:55 AM
should help you out You have to call a function on document load, which will get the todo list from localStorage. If it doesn't exist, the masterList will become an empty array and will be ready to store todos inside.
Note: Check if it works, because due to the cors blockage on SO I'm unable to test it.
code :
var masterList;

window.onload = function(){
  masterList = JSON.parse(localStorage.getItem('masterList')); //get data from storage
  if (masterList !== null) { //if data exist (todos are in storage)
    masterList.forEach(function(v){ //append each element into the dom
      var task = v;
      var entry = document.createElement('li'); //2
      var list = document.getElementById('orderedList'); //2
      entry.appendChild(document.createTextNode(task)); //2
      list.appendChild(entry); //2
    })
  } else { //if nothing exist in storage, keep todos array empty
    masterList = [];
  }
}

function addToList(){
  var task = document.getElementById('todoInput').value;
  var entry = document.createElement('li'); //2
  var list = document.getElementById('orderedList'); //2
  entry.appendChild(document.createTextNode(task)); //2
  list.appendChild(entry); //2

  masterList.push(task);

  localStorage.setItem('masterList', JSON.stringify(masterList));

  console.log(task);
  console.log(masterList);
  clearInput();
 }

function clearInput() {
    todoInput.value = "";
}
JSON Local Storage not saving after the page refresh

JSON Local Storage not saving after the page refresh


By : manyhats
Date : March 29 2020, 07:55 AM
wish of those help Newbie here. I'm working on a project which has an array and lets a user to add new items to the array by typing them in a text box and then clicking a "Submit" button. I made it so the array would transform into JSON when I unloaded the page and back into JavaScript when I loaded it again. My script worked to save the items in local storage for a while. After some code refactoring the program suddenly stopped saving my items on the page refresh. I wanted to program it so that it would save it even if I turned off the computer. , yes there we couple of issues with code. This snipped works fine.
code :
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  <body onload="LoadItems()" onunload="saveItems()">
    <div>
      <textarea id="inputBox" rows="2" cols="25"></textarea>
      <button id="submit" type="button">Submit</button>
    </div>
    <div>
      <p>Data in storage</p>
    </div>
    <div>
      <textarea id="showData" rows="2" cols="25"></textarea>
    </div>

    <script type="text/javascript">
      var Items = [];
      function LoadItems() {
        debugger;
        Items = JSON.parse(localStorage.getItem("Items"));
        if (!Items) Items = [];
        $("#showData").val(JSON.stringify(Items));
      }

      function saveItems() {
        var JSONItems = localStorage.setItem("Items", JSON.stringify(Items));
      }

      $("#submit").click(function() {
        var newitem = $("#inputBox").val();
        if (newitem) {
          Items.push(newitem);
          $("#inputBox").val("");
        }
      });
    </script>
  </body>
</html>
Related Posts Related Posts :
  • Jquery and create html on the fly
  • jQuery Validation not validating on button click
  • Jquery Draggable/Droppable appending multiple divs
  • jQuery selector not working properly. Possible Sizzle bug?
  • enable anchor in twitter bootstrap modal
  • jQuery keydown : Wait for previous event to finish
  • why magnific popup ajax box closes if clicked on content
  • JQPlot pie charts "jqplotDataClick" event fires multiple times
  • Show div as the page scrolls on div height
  • Keypress event for ajax call does not work
  • responsive/fluid jQGrid with Twitter Bootstrap
  • IE10 does not seem to fire load event
  • Remove tipTip tool tip
  • jquery datepicker changing unavailable dates in one instance
  • TableTools plugin export buttons are not working
  • Prepopulate jquery token input textbox
  • Open a fancybox link with ajax
  • Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"
  • TR alternate background colour with unequal number of TD
  • DATATABLE jQuery TH and TD alignment
  • Jquery UI Convert Select's to Range Slider
  • Change text in text field according to link that has been clicked
  • Animate addClass + removeClass transitions?
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org