将多个值添加到localStorage，然后在JavaScript中检索随机值

Andrew 发表于 Dev

安德鲁

我正在尝试创建一个系统，其中用户在不同的时间输入多个值，然后单击一个按钮，告诉他们输入之一（随机）。这是我到目前为止所拥有的：

（注意：出于某种奇怪的原因，此代码段在此处无法正常运行（至少在我这边不起作用），但在JS Bin甚至我自己的Notepad ++中都可以正常工作）

function store(){
  var toStore = document.getElementById("itemInputBox");
  localStorage.setItem("itemInputBox", toStore.value);
}

function get(){
  var toGet = localStorage.getItem("itemInputBox");
  document.getElementById("outputArea").innerHTML = toGet;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="itemForm">
    <input type="text" id="itemInputBox" autocomplete="off" onmouseout="store()"><br><br>
    <button id="getStoredValue" onclick="get()" type="button" style="cursor:pointer;">Get Input Value</button>
  </form>
  
  <div id="outputArea"></div>
</body>
</html>

由于我刚开始编码（仅进行了大约一年的时间），并且对localStorage还是陌生的，因此我需要一些指导。感谢任何回应！

哈沙娜·塞拉辛格（Harshana Serasinghe）

您可以使用Javascript中的数组在localStorage中存储多个值。存储值时，它们应为JSON格式。另外，在检索值时，您必须将该JSON字符串传递给`JSON.parse（array），然后检索值。

要从该数组获取随机值，可以在JavaScript中使用Math函数。请检查以下示例。它不会在StackOverflow代码段中起作用，因为它限制了LocalStorage函数，但您可以在本地检查它。

function store(){
var toStore = document.getElementById("itemInputBox");
var valuesJSON = get();
if (valuesJSON == null){
    createLocalStorageKey();
}
var values = JSON.parse(get());
values.items.push(toStore.value);
localStorage.setItem("itemInputBox", JSON.stringify(values));

}

function createLocalStorageKey(){
localStorage.setItem("itemInputBox", JSON.stringify({items:[]}));
}

function get(){
var toGet = localStorage.getItem("itemInputBox");
return toGet;
}

function parseValueToHTML(){
var valuesJSON = get();
if (valuesJSON == null){
    createLocalStorageKey();
}
var values = JSON.parse(get());
document.getElementById("outputArea").innerHTML = values.items[Math.floor(Math.random() * values.items.length)];
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <form id="itemForm">
  <input type="text" id="itemInputBox" autocomplete="off"><br><br>
  <button onclick="store()" type="button">Store Value</button>
  <button id="getStoredValue" onclick="parseValueToHTML()" type="button" style="cursor:pointer;">Get Input Value</button>
  </form>

  <div id="outputArea"></div>
</body>
</html>