向 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.