HTML5：在本地存储上使用数组 [重复]

Posted 2023-03-05

【中文标题】HTML5：在本地存储上使用数组 [重复]

【英文标题】：HTML5: Using array on Local Storage [duplicate]

【发布时间】：2016-11-27 00:11:40

【问题描述】：

我有这个代码：

<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"，它适用于我，但它只是一个输入。

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

【问题讨论】：

localStorage 只存储字符串。存储数组，写入时使用JSON.stringify，读取时使用JSON.parse

下面的代码可以写吗？

这样 localStorage.setItem('Text', JSON.stringify(storage))

好的，那么如何删除它 >> [" "]

【参考方案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

【讨论】：

谢谢 :) 如果我输入文本并按“Simpan”按钮后，它会自动显示下面的数组而不按“Tampil”按钮？

【参考方案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>

【讨论】：

你也可以添加html脚本吗？

当然！我只是追加到一个空列表，但我添加了更多的 javascript 来向您展示我是如何使用它的。