10

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>
user1358625
  • 225
  • 2
  • 6
  • 10

2 Answers2

20

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");
StrikerVillain
  • 3,719
  • 2
  • 24
  • 41
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • so like this? – user1358625 Apr 30 '12 at 06:18
  • What would I do if I wanted to save the value of multiple inputs and have them stay inside the input until I pressed a clear button and cleared them? –  Aug 21 '18 at 08:42
1

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');
Stephan
  • 91
  • 1
  • 5