CODEWITHSUNDEEP
javascripthtmlstoragelocal
Alan Joseph Sylvestre
Alan Joseph Sylvestre

Reputation: 81

local storage using html5

I need to store the values that the user enters in each of the boxes through html5. When the user refreshes the page, it should keep the values in each of the text boxes. I had a friend tell me that this would work, but it's not and I'm not getting any errors in the console.

<script>
function storageValue() {
    var uno = document.getElementById("storage1");
    var duck = uno.value
    var dos = document.getElementById("storage2");
    var duckie = dos.value
    var tres = document.getElementById("storage3");
    var rubberDuck = tres.value
    var quatro = document.getElementById("storage4");
    var rubberDuckie = quatro.value
    alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
    localStorage.setItem('duck', duck);
    localStorage.setItem('duckie', duckie);
    localStorage.setItem('rubberDuck', rubberDuck);
    localStorage.setItem('rubberDuckie', rubberDuckie);
    checkLocalStorage();
}

function checkLocalStorage() {
    var poodle = document.getElementById('storage1').value
    poodle.innerHTML = localStorage["duck"] 
    var cow = document.getElementById('storage2').value
    poodle.innerHTML = localStorage["duckie"]
    var dog = document.getElementById('storage3').value
    dog.innerHTML = localStorage["rubberDuck"]
    var cat = document.getElementById('storage4').value
    cat.innerHTML = localStorage["rubberDuckie"];
}

checkLocalStorage();

Here's the HTML that I have:

<body align="center" style="background-color:red;">
    <div>
        <header>
            <h1>Local Storage</h1>
        </header>
        <input type="text" id="storage1" size="40" placeholder="Please enter a value">
        <input type="text" id="storage2" size="40" placeholder="Please enter a value">
        <input type="text" id="storage3" size="40" placeholder="Please enter a value">
        <input type="text" id="storage4" size="40" placeholder="Please enter a value">
        <br>
        <br>
        <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
        <div id="storageDiv"></div>
        <nav>
            <p>
                <a href="/">Home</a>
            </p>
            <p>
                <a href="/contact">Contact</a>
            </p>
        </nav>

        <div>

        </div>

        <footer>
            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>

Upvotes: 1

Views: 3431

Answers (4)

Kamal
Kamal

Reputation: 794

        if(typeof(Storage) !== "undefined") {
        // working
    } else {
        // Not Support
    }
    Store Data

    //Syntax 
    localStorage.setItem(Key,Value);
    //By localStorage Object  Method

    localStorage.setItem('name','TEST');

    Retrieve Data
    var a = localStorage.getItem('name');
    alert(a); //Output : TEST


    Remove Data
    localStorage.removeItem('name');


    Remove All Data
    localStorage.clear();

Test Demo

Upvotes: 0

chrislondon
chrislondon

Reputation: 12031

Working JS Fiddle: http://jsfiddle.net/9BN5r/

The problem is you are trying to set the innerHTML of an input field. You need to set the value. Change your checkLocalStorage() function to:

function checkLocalStorage() {
    var poodle = document.getElementById('storage1');
    poodle.value = localStorage['duck'];

    var cow = document.getElementById('storage2');
    cow.value = localStorage['duckie'];

    var dog = document.getElementById('storage3');
    dog.value = localStorage['rubberDuck'];

    var cat = document.getElementById('storage4');
    cat.value = localStorage['rubberDuckie'];
}

Upvotes: 2

jongo45
jongo45

Reputation: 3090

Your storageValue function seems okay, but your checkLocalStorage function needs fixing;

You'll need something a bit more symmetrical:

localStorage.setItem('duck', document.getElementById("storage1").value);
...
document.getElementById("storage1").value = localStorage.getItem('duck');

preferably with some code for providing default values and value checking, etc..

but what you have in your checkLocalStorage function is:

var poodle = document.getElementById('storage1').value
poodle.innerHTML = localStorage["duck"]

... which doesn't even make sense.

Upvotes: 0

gersande
gersande

Reputation: 463

The below was taken from W3schools

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

Your friend is right, localStorage should work with HTML5. Are you sure that your website is working correctly with HTML5 ()

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Without more information about the errors, this is all I can really recommend.

EDIT: From the comment, it's not working in Chrome - are you sure Chrome has been updated recently?

Upvotes: 0

Related Questions