CODEWITHSUNDEEP
javascriptstoragelocal
Alan Joseph Sylvestre
Alan Joseph Sylvestre

Reputation: 81

Adding Values through local storage

I'm trying to make a page where the user can input data into four different values in four different text boxes, and the values can be stored by using local storage, and then when the user refreshes the page or opens it in a new tab, those previously entered values are still there. Any advice on how to do this would be really great! Here's the code that I have currently:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Storing Data</title>
    <meta name="description" content="" />
    <meta name="author" content="Alan Sylvestre" />

    <style>
        h1 {
            background-color: #000000;
            color: #C00000;
            padding: 10 px;
            padding: 10 px;
            text-align: center;
        }

    </style>

    <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, duckie, rubberDuck, rubberDuckie);
            checkLocalStorage();
        }

        function checkLocalStorage() {
            var div = document.getElementById("storageDiv");
            div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];
        }

    </script>
</head>

<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>
</html>

Upvotes: 0

Views: 1794

Answers (2)

jlars62
jlars62

Reputation: 7353

Im pretty sure when using setItem, you need to set items using a (key, value) pair.

See this page as reference: http://en.wikipedia.org/wiki/Web_storage#localStorage

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Storing Data</title>
<meta name="description" content="" />
<meta name="author" content="Alan Sylvestre" />

<style>
    h1 {
        background-color: #000000;
        color: #C00000;
        padding: 10 px;
        padding: 10 px;
        text-align: center;
    }

</style>


</head>

<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>
</html>

<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 div = document.getElementById("storageDiv");
    div.innerHTML = localStorage["duck"] + localStorage["duckie"] + localStorage["rubberDuck"] + localStorage["rubberDuckie"];
}

checkLocalStorage();
</script>

Also, I put the script below the html so it is ran after the html. I also added an immediate call to checkLocalStorage (last line of script).

Upvotes: 1

howderek
howderek

Reputation: 2244

Here's a fiddle: http://jsfiddle.net/howderek/T5PqU/

Use localStorage like an array to store values: localStorage["duckie"] = duckie

Also, you can't do this: div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];

Here is the updated code:

JS

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

function checkLocalStorage() {
    var div = document.getElementById("storageDiv");
    div.innerHTML = "The current values are: " + localStorage["duck"] + ", " + localStorage["duckie"]   + ", " +  localStorage["rubberDuckie"] + ", " +  localStorage["rubberDuckie"];
}
checkLocalStorage();

Upvotes: 1

Related Questions