asked on

Saving a variable to local storage with JavaScript

Hi experts,

I have this example.
It uses jQuery.
So when I click the button it saves a variable to local storage.
Then with the other button I clear the local storage.
It works fine.

How do i do the exact same thing but only using pure javascript. Without using jQuery.
I have a legacy application that doesn't have the jquery library and I can only use JavaScript.

Sample1.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events - Local Storage</title>

    <!-- LOCAL REFERENCES -->
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.js"></script>

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
    </style>

    <script type="text/javascript">
        // start of document ready
        $(document).ready(function () {
            // ---------------------

            // HTML5 web storage
            // http://www.w3schools.com/html/html5_webstorage.asp

            //******** on Page Load Events ********


            //******** on Page Load Events ********

            // *********** Button click event ***********
            $('#ButtonSaveLocalFruit2').click(function () {

                // create local storage variable
                var localstoragevarfruit2 = "guava";
                // store variable value in local storage
                localStorage.setItem("localstoragefruit2", localstoragevarfruit2);
            });
            // *********** Button click event ***********

            // *********** Button click event ***********
            $('#ButtonClearStorage').click(function () {

                // clear localstorage
                // syntax is localStorage.removeItem('keyName');
                // so if your key name is checked
                // use resources tab in google to view local storage
                localStorage.removeItem('localstoragefruit2');
            });
            // *********** Button click event ***********

            // ---------------------
            // end of document ready
        });
    </script>
</head>
<body>
    On button click a variable is saved in local storage. Then with a button you can clear local storage.
    <br />
    <br />
    <table>
        <tr>
            <td></td>
            <td><input id="ButtonSaveLocalFruit2" type="button" value="Save Fruit To Local Storage" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="ButtonClearStorage" type="button" value="Clear Local Storage" /></td>
        </tr>
    </table>
    

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Chinmay Patel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

NB For the above code place the script at the end of your document OR place it in a document ready

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events - Local Storage</title>

    <!-- LOCAL REFERENCES -->
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.js"></script>

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
    </style>

<script>
window.addEventListener('load', function() {
	// *********** Button click event ***********
	document.getElementById('ButtonSaveLocalFruit2').addEventListener('click', function () {
	  // create local storage variable
	  var localstoragevarfruit2 = "guava";

	  // store variable value in local storage
	  localStorage.setItem("localstoragefruit2", localstoragevarfruit2);
	});
	// *********** Button click event ***********

	// *********** Button click event ***********
	document.getElementById('ButtonClearStorage').addEventListener('click', function () {
	  // clear localstorage
	  // syntax is localStorage.removeItem('keyName');
	  // so if your key name is checked
	  // use resources tab in google to view local storage
	  localStorage.removeItem('localstoragefruit2');
	});
});
</script>
</head>
<body>
    On button click a variable is saved in local storage. Then with a button you can clear local storage.
    <br />
    <br />
    <table>
        <tr>
            <td></td>
            <td><input id="ButtonSaveLocalFruit2" type="button" value="Save Fruit To Local Storage" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="ButtonClearStorage" type="button" value="Clear Local Storage" /></td>
        </tr>
    </table>
    

</body>
</html>

Open in new window

maqskywalker

ASKER

thanks for the good info.

Julian Hansen

You are welcome.