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>

This might be a good place to start: developer.mozilla.org/en/DOM/Storage — James Allardice
– James Allardice, Commented Apr 26, 2012 at 12:20

StrikerVillain · Accepted Answer · 2019-02-24 13:27:37Z

20

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

A key by which you can refer to the item

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");

edited Feb 24, 2019 at 13:27

StrikerVillain

3,8262 gold badges26 silver badges43 bronze badges

answered Apr 26, 2012 at 12:23

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1358625 Over a year ago

so like this? <label for="serveri"> Server: </label> <input type='text' name="server" id="saveServer"/> <button onclick="save_data()" type="button" value="Save" id="Save" data-theme="a">Save</button> <script> function saveData(){ var input = document.getElementById("saveServer"); localStorage.setItem("server", input.value); var storedValue = localStorage.getItem("server"); } </script>

user9510595 Over a year ago

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?

Stephan · Accepted Answer · 2015-02-07 12:25:33Z

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');

answered Feb 7, 2015 at 12:25

Stephan

911 silver badge5 bronze badges

Collectives™ on Stack Overflow

Save input data to localStorage on button click

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related