Question

我需要一些帮助来弄清楚本地存储和JSON的工作原理。

我有以下html：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="Script.js"></script> 
</head>
<body>
    <form name="test" method="post" action="javascript:storage()">
        <input name='surname' id="surname" value='surname'>
        <input name='lastname' id="lastname" value='lastname'>
        <input type="submit" value="test">
    </form>
    <div id="tabletest"></div>
</body>
</html>

以下javascript：

function storage(){
    var surname = document.getElementById('surname').value;
    var lastname = document.getElementById('lastname').value;
    var person = {
        "surname" : surname,
        "lastname" : lastname,
        "dateofbirth" : "01-01-1990"    
    };

    person = JSON.stringify(person);
    localStorage.setItem('person', person);

    var person2 = localStorage.getItem('person');
    var persons = JSON.parse(person);

    var tabletest = document.getElementById('tabletest');
    var person3 = JSON.parse(person2);
    tabletest.innerHTML += JSON.stringify(person3);
}

我的问题/烦恼：我在tabletest中得到的输出是：

{ "surname":"surname", "lastname":"lastname", "geboortedatum":"01-01-1990" }

如何只在＆＃39; tabletest＆＃39;中获取姓氏和姓氏？ DIV？
如果点击提交按钮时，如何使用文本字段中的输入添加新值（因为推送不起作用）？

Answer 1

要获取姓氏（或者我应该说JSON中的任何值），请使用

tabletest.innerHTML +="Lastname:"+person3.lastname+" Sirname:"+person3.sirname;

并添加到JSON使用：

person.newName = newName 
//or 
person["newName"] = newName;

Answer 2

http://pastebin.com/eUabMPCP

现在，您的逻辑显示您抓取名字和姓氏的值，分别是：姓氏和姓氏：

person = JSON.stringify(person);
    localStorage.setItem('person', person);

   var person2 = localStorage.getItem('person');
    var persons = JSON.parse(person2);

    var tabletest = document.getElementById('tabletest');
    tabletest.innerHTML += persons.surname + ' ' + persons.lastname;

You were very close on the logic, but you needed something like this:

    document.getElementById('btnTest').onclick = storage;

您需要在按钮单击事件上运行此函数并获取值，并只使用存储setItem（键，值）函数。 Here is a fiddle。您只需要进行字符串化，然后解析存储数据。之后，您可以从中获取属性。

 <button id='btnTest' value="test">Test</button>

我还修改了“提交”＃39;按钮到标准按钮＆＃39;元素，以便表格不发布：

{{1}}

然后你可以做Ajax。否则，您需要执行Here is the documentation

Answer 3

Localstorage适用于键值对。由于您使用相同的密钥“人”，因此您只需覆盖以前的值。你可以使用你使用“人物”存储的一系列人物。 key，但每次都负责解析/字符串化数组。

var personsStore = [];

function storage() {
   var s = localStorage.getItem("person");
   if (s) {
      personsStore = JSON.parse(s);
   }
   var person = {...} //after you get properties from dom input
   personsStore.push(person);
   var stringForm = JSON.stringify(personsStore");
   localStorage.setItem("person", stringForm);

  var tabletest = document.getElementById('tabletest');
  tabletest.innerHtml += stringForm;
}

如果您想要特定属性，最简单的方法是使用像下划线（underscore.org）这样的工具。附加到＆＃39; tabletest＆＃39;变

  tabletest.innerHtml += JSON.stringify(_.map(personStore, fucntion(p) {
       return _.pick(p, "firstname", ....);
  });

localstorage和JSON

3 个答案: