按钮单击将输入数据保存到localStorage

时间:2012-04-26 12:18:10

标签: html5 button input local-storage

我正在尝试构建我的第一个Web应用程序。在我的应用程序中,我需要一个设置面板,但我不知道如何做到这一点。我一直在网上搜索并遇到了一个HTML5 localStorage,我认为这可能是最好的方法。但问题是我不知道如何使用它。

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

当用户点击按钮时,如何将数据从输入保存到localStorage?像这样的东西?

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

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

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

2 个答案:

答案 0 :(得分:16)

localStorage对象具有setItem方法,用于存储项目。这需要2个参数:

  1. 您可以参考该项目的键
  2. var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.val());
    
  3. 上面的代码首先获取对input元素的引用,然后将一个项目(“server”)存储在本地存储中,其值为input元素的值。

    您可以致电getItem

    来检索该值
    var storedValue = localStorage.getItem("server");
    

答案 1 :(得分:1)

这对我有用。为了设置,我将.value置于var后面,并在var中调用了setItem

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

获取文本:

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