如何將多個文本添加到本地存儲HTML5
[英]How to add multiple text to local Storage HTML5
問題描述
我創建了一些函數和一些帶有表格的輸入框，以在重新加載頁面時顯示數據。 我遇到的問題是如何獲取多個插入到本地存儲，以及如何使用循環語句顯示表上的所有數據。 還有一種方法可以立即顯示數據而不是重新加載。 我想我只是對本地存儲感到困惑，我試圖查看其工作原理。 https://jsfiddle.net/zzLumrsd/
<!DOCTYPE>
<html>
<head>
<title> Local storage</title>
<style type="text/css">
table#table1{
width: 10%;
background-color: #gray;
}
</style>
<script>
function saveMy(){
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('textfield2').value = storedValue;
}
}
function removeMy() {
document.getElementById('textfield').value = '';
localStorage.removeItem('text');
}
</script>
</head>
<body onload="load()">
<input type="text" id="textfield" />
<input type="button" value="save" onclick="saveMy()"/>
<input type="button" value="remove" onclick="removeMy()"/>
<hr/>
<table id="table1" border="1">
<tr>
<th>text</th>
</tr>
<tr>
<td>
<input type="text" id="textfield2" />
</td>
</tr>
</table>
</body>
</html>
1 個解決方案
解決方案1
3 已采納 2015-04-07 17:16:19
據我了解，您想將多個字符串存儲到localStorage 。 您可以使用以下方法實現此目的：
怎么樣
為此，您將所有字符串存儲在一個數組中。 然后，我們可以將其放入localStorage。 在示例中，我將使用“名稱”作為localStorage項目名稱。 數組無法放入localStorage，因此我們必須使用JSON.stringify將其設置為String來實現。
例子
設定項目
var vals = [];
vals.push('Bob');//Add the text 'item1' to vals
localStorage.setItem('names', JSON.stringify(vals));
獲取物品
vals = JSON.parse(localStorage.getItem('name'));
在這種情況下，我們將從localStorage獲取項目，然后使用JSON.parse將字符串再次放入數組中
進一步說明
localStorage是一種瀏覽器API ，可讓我們在用戶計算機上存儲數據。 localStorage有點像cookie，但限制較少，並且不會過期。
在這種情況下，我們想將名稱存儲在localStorage 。 您可以將任何JavaScript存儲在localStorage中。 堆棧溢出將時間戳和其他一些內容存儲在localStorage 。
每個item或localStorage中的“事物”都有一個名稱和一個值 。
使用localStorage.setItem('name', 'Bob') ，創建一個名為name的item ，其值為Bob
在您要添加第二個名字之前，一切都很好。 JavaScript具有可以將多個值存儲在一個“變量”中的數組 。 這意味着您可以在一個變量/項目中存儲多個名稱。 以下是數組的示例
var myArray = ['Bob'，'Joe'，'Phil'];
該數組具有三個值： Bob ， Joe和Phil 。 您可以使用Array.push()將項目添加到數組中。 我將在此處鏈接有關數組的文章
好的，現在您將三個值存儲在數組中，並想要存儲它。 localStorage值只能是字符串 ！ JSON是一種類似於JavaScript對象的特殊“變量”類型，您可以在此處了解有關信息 。 簡單來說，數組是“ JSON”。
因為localStorage只接受字符串，所以我們必須將數組（JSON）轉換為可以存儲的字符串。 完成的方法是JSON.stringify(ARRAY_HERE) 。 這將返回類似以下的字符串：
"["Bob","Joe","Phil"]"
現在我們的數組是一個字符串，我們可以使用localStorage.setItem()將其放入localStorage 。
要檢索此內容時該怎么辦？
要檢索該數組，我們將使用localStorage.getItem() 。 在localStorage.getItem() ，輸入要訪問的item的名稱，它將返回它。 但是問題是它仍然是字符串。 這就是JSON.parse()傳入的地方。這會將我們的“字符串化”數組轉換為實際數組。
這都是做什么的
我想在localStorage中存儲三個名稱
你會怎么做？ 很簡單，您可以使用.push()將名稱添加到數組中，然后進行存儲。 當您要顯示它時，請使用我之前介紹的localStorage.getItem() 。
進一步閱讀
我寫了很多書，但這可能還不夠，請查看以下內容：
HTML5將多個文本框存儲到本地存儲
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.