向 localStorage 添加多个值，然后在 JavaScript 中随机检索一个
[英]Add multiple values to localStorage and then retrieve a random one in JavaScript
问题描述
我正在尝试制作一个系统，其中用户在不同的时间输入多个值，然后可以单击一个按钮，告诉他们其中一个输入（随机）。 这是我到目前为止：
（注意：由于某些奇怪的原因，这段代码片段在这里无法正常运行（至少在我这边不是），但它在 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 的新手，因此我需要一些指导。 感谢回答的人！
3 个解决方案
解决方案1
0 2020-11-15 01:46:37
您可以使用数组来存储您的值
在添加新值之前，您必须从本地存储中检索数组
将新值添加到数组并用更新的数组替换本地存储中的前一个数组
使用 JSON 序列化数据存储在本地存储 如果本地存储中没有数据，则使用该值创建一个数组
对于获取功能，检索数组后，您可以生成一个从 0 到数组长度的随机数 - 1 以按索引选择值。
解决方案2
0 已采纳 2020-11-15 01:58:47
您可以在 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>
解决方案3
0 2020-11-15 02:23:21
我的方式...
const itemForm = document.forms['item-form'] , getAllItems = _ => { let r = localStorage.getItem('itemInputBox') return !r ? [] : JSON.parse(r) } , setAllItems = arr => { localStorage.setItem('itemInputBox',JSON.stringify(arr)) } ; itemForm.setValueStored.onclick=()=> { let val = itemForm.itemInputBox.value.trim() if (val) { let store = getAllItems() if (!store.include(val)) { store.push(val) setAllItems(store) } } itemForm.itemInputBox.value = '' } itemForm.getStoredValue.onclick=()=> { let store = getAllItems() itemForm.itemInputBox.value = (!store.length) ? '' : store[Math.floor(Math.random() *store.length)] }
<form name="item-form"> <input type="text" name="itemInputBox" autocomplete="off"> <br><br> <button name="setValueStored" type="button">Set value in store</button> <button name="getStoredValue" type="button">Get random input value from store</button> </form>
将多个值保存到 LocalStorage 中的同一类型，然后检索这些值
[英]Save multiple values to same type in LocalStorage then retrieve the values
在javascript中从localstorage中检索多个字符串值
[英]Retrieving multiple string values from localstorage in javascript
如何使用 localstorage 在数组中存储多个随机值
[英]How do i store multiple random values in an array with localstorage
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.