HTML5: Using array on Local Storage

Question

I have this code :

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

it will show input form and the text would store to local storage, when i press "Tampil" button, the text will showing in div id="tampil", it works for me, but it just one input.

How can i add some array that the text won't replace after i input another text?

localStorage only stores strings. To store an array, you can use `JSON.stringify` when writing and `JSON.parse` when reading — Jaromanda X, Jul 23 '16 at 02:10
like this localStorage.setItem('Text', JSON.stringify(storage)) — Cem Arguvanlı, Jul 23 '16 at 02:18
ok, then how to remove this >> [" "] << and showing it every row ? — husin.anti, Jul 23 '16 at 02:53

score 1 · Accepted Answer · answered Jul 23 '16 at 02:17

For arrays you can use JSON.stringify and JSON.parse to write and read to 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

thanks :) And how if after i input the text and press "Simpan" button, it will automatically show the array below without pressing "Tampil" button ? — husin.anti, Jul 23 '16 at 02:32

Chris Lacaille · Answer 2 · 2016-07-23T03:52:52.140

Here is a example of how I used it to keep record of a list of contacts along with their messages in a localStorage key named 'keys' so I could have multiple messages from the same email w/o overwriting the last message.

Hope this helps!

Note: this may not be the best implementation since I was learning how to do it at the same time I coded this so suggestions/fixes welcome! But it worked for me.

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

Sure! I just append to an empty list but I added more of the javascript to show you how I used it. — Chris Lacaille, Jul 23 '16 at 03:21

HTML5: Using array on Local Storage

2 Answers2