如何向本地存储中的键发送多个值？答案

【问题标题】：How can I send more than one value to a key in local storage?如何向本地存储中的键发送多个值？
【发布时间】：2014-03-29 09:00:57
【问题描述】：

我正在尝试使用 html5 本地存储为旅行者构建一本日记。

这个想法是您填写一个表格：姓名、图片、日期、位置。并在另一页显示此信息

我被卡住了，因为我不知道如何为 1 个键赋予更多价值以及如何在获取信息后自动更改密钥表单已保存。

<form id="localStorage" method="post" action="">
    <label>Kies foto:</label>
    <br/>
    <input type='file' id="afbeelding" />
    <br/>
    <br/>
    <label>Onderschrift:</label>
    <br/>
    <input type="Onderschrift" name="Onderschrift" id="Onderschrift" class="Opslaan" required />
    <br/>
    <br/>
    <button onclick="opslaan()" type="button">Verstuur</button>
</form>

function opslaan() {
    var inputOnderschrift = document.getElementById("Onderschrift");
    localStorage.setItem("onderschrift", inputOnderschrift.value);
}

【问题讨论】：

我希望你的意思是日记而不是腹泻（这就是 diarree 在英语中的意思）:)
哈哈。我已经编辑了已经经过同行评审的标题:)

标签： javascript html local-storage

【解决方案1】：

我创建了一个数组，将更多的值放入 1 个键中，它起作用了

【讨论】：

【解决方案2】：

您可以使用用户数据（JSON 字符串化）存储一个对象。

例如：

var userData = {
  'name': '',
  'picture': '',
  'date': '',
  'location': ''
};

var inputOnderschrift = document.getElementById('Onderschrift');
userData.name = inputOnderschrift.value;

var inputPicture = document.getElementById('Picture');
userData.picture = inputPicture.value;

// etc.

localStorage.setItem('userData', JSON.stringify(userData));

在您的下一页中，您可以像这样检索数据：

var userData = JSON.parse(localStorage.getItem('userData'));
var name = userData.name;
var picture = userData.picture;

【讨论】：

当您在第二段代码中检索数据时，应该是 localStorage 而不是 sessionStorage，对吧？请更正这一点。
更新了 userData.picture 和 JSON 字符串化/解析

【解决方案3】：

据我所知，本地存储用于字符串键/值对。虽然您可以构建自定义对象，将其字符串化并存储，类似于：

var myObject = { name: 'myname', address: 'myaddress' };
localStorage.setItem("myObject", JSON.stringify(myObject));

然后在返回的路上使用JSON.parse(); 将其返回到一个对象并重新填充您的表单。

【讨论】：