Save input data to localStorage on button click

Question

I am trying to build my first web application. In my app I need to have a settings panel, but I have no idea how to do it. I've been searching the web and came across a HTML5 localStorage, which I believe might be the best way to do the things. But the problem is I have no idea how to use it.

<input type='text' name="server" id="saveServer"/>  

How can I save data from input to localStorage when user clicks the button? Something like this?

<input type='text' name="server" id="saveServer"/>  

<button onclick="save_data()" type="button">Save/button>

    <script>
            function saveData(){
        localStorage.saveServer
        }
        </script>

Answer 1

The localStorage object has a setItem method which is used to store an item. It takes 2 arguments:

1. A key by which you can refer to the item

2. A value

   var input = document.getElementById("saveServer");
   localStorage.setItem("server", input.val());
   

The above code first gets a reference to the input element, and then stores an item ("server") in local storage with the value of the value of that input element.

You can retrieve the value by calling getItem:

var storedValue = localStorage.getItem("server");

Answer 2

This worked for me. For setting I placed .value behind the var and called the var in the setItem:

var input = document.getElementById('saveServer').value;
localStorage.setItem('server', input);

For getting the text back:

document.getElementById('saveServer').value = localStorage.getItem('server');