HTML5：使用本地存储

Question

阵列我有这样的代码：

<script type="text/javascript" > 
// fungsi simpan(), ketika tombol diklik maka string 
// di dalam input akan tersimpan ke dalam storage browser 
function simpan() {  
    var storage = document.getElementById('nama').value; 
    localStorage.setItem('Text',storage); 
} 
// tampil() akan menampilkan string yang tersimpan 
// ke tag div yang ditentukan "hasil" 
function tampil() { 
    var tampilNama = localStorage.getItem('Text'); 
    if (tampilNama) { 
    x = document.getElementById('tampil'); 
    x.innerHTML=tampilNama; 
    } 
} 
// fungsi untuk menghapus localstorage browser 
function hapus() { 
    localStorage.removeItem('Text'); 
} 
</script> 
<input type="text" id="nama" /> 
<input type="button" value="Simpan" onclick="simpan()" /> 
<input type="button" value="Tampil" onclick="tampil()" /> 
<input type="button" value="Hapus" onclick="hapus()" /> 
<div id="tampil"></div> 

它会显示输入表格和文本将存储到本地存储，当我按下“Tampil”按钮，文本将在div id="tampil"展示，它适用于我，但它只是一个输入。

如何添加一些数组，文本将不会替换后，我输入另一个文本？

Answer 1

对于数组，你可以使用JSON.stringify和JSON.parse写入和读取到的localStorage：

function simpan() { 
    var storage = localStorage.getItem('Text'); // Get local storage 
    if(storage) storage = JSON.parse(storage); // If it exist parse it 
    else storage = [];       // Otherwise define a empty array 
    // Push value to array 
    storage.push(document.getElementById('nama').value); 
    // Stringify the array into text to store. 
    localStorage.setItem('Text',JSON.stringify(storage)); 
} 

Demo

Answer 2

下面是我如何用它来保持接触随着名单的纪录一个例子他们的消息在一个名为'keys'的localStorage密钥中，所以我可以从同一封电子邮件中删除最后一封邮件中的多封邮件。

希望这会有所帮助！

注意：这可能不是最好的实现，因为我正在学习如何做到这一点，同时我编码这样的建议/修复欢迎！但它为我工作。

<script type="text/javascript"> 

// populate history list on page load 
(function() { 
    storageKeys = JSON.parse(localStorage.getItem('keys')); 
    if ($('#history li').length === 0 && storageKeys) { 
     for (var i of storageKeys) { 
      if (i[0]) { 
       sendTo = i[0]; 
       sendMsg = i[1]; 
       addItemToList(sendTo, sendMsg); 
      } 
     } 
    } 
})(); 

var itemToAdd; 
var jsStoreObject = []; 
// this function adds to localStorage 
function addItemToStorage(listTo, listMsg) { 
    addItemToList(listTo, listMsg); 

    jsStoreObject = JSON.parse(localStorage.getItem('keys')); 
    jsStoreObject.push([listTo, listMsg]); 
    localStorage.setItem('keys', JSON.stringify(jsStoreObject)); 
} 
// This appends item to the #history list 
function addItemToList(name, message) { 
    itemToAdd = '<li><u>'+ name + '</u>:' + 
       message + '</li>'; 
    $('#history').prepend(itemToAdd); 
} 
</script> 

    <!-- history --> 
    <div class="text-xs-center" id="history-wrapper"> 
    <ul id="history"> 

    </ul> 
    </div>