Ahmad Masykur

var myObject = { "languages" : [ "C#", "VB.NET", "ASP.NET", "Javascript", "SDCC", "Assembler" ] }; //

IE8 Local Storage Support

Local Storage merupakan salah satu dukungan dari HTML5. IE8 telah menerapkan beberapa dukungan HTML5 yang merupakan spesifikasi web masa depan. IE dari dulu selalu beberapa lebih maju dari browser lainnya dalam penerapan Ajax. Ajax pertama kali dikenalkan oleh Microsoft pada aplikasi Outlook Web Access dengan IE4. Kali ini Microsoft melangkah lebih maju lagi dalam penerapan local storage untuk mempercepat kinerja aplikasi Ajax.

Local storage bukan barang baru dalam dunia web. Google telah mengenalkan produknya Google Gear untuk mendukung local storage. Adobe juga mengeluarkan AIR yang mendukung local storage. Microsoft Silverlight dan Adoba Flash juga memiliki kemampuan menyimpan dalam local storage. Semua kemampuan software tersebut menawarkan kemampuan untuk menyimpan dalam local PC dengan caranya masing-masing. Untuk menggunakan local storage juga membutuhkan plug-ins yang terinstall di PC. IE8 menawarkan kemampuan local storage dalam internal browser sehingga tidak memerlukan plug-ins tambahan yang dinamakan DOM Storage.

Dulu untuk menyimpan nilai dalam local PC digunakan cookie. Keterbatasan cookie adalah tidak bisa menyimpan data dalam jumlah besar (max 4KB). Cookie juga disimpan dalam pasangan key dan value string yang selalu ditransmisikan ke server pada setiap request. Berbeda dengan DOM storage yang memiliki kapasitas penyimapanan lebih besar yaitu 10MB dan tidak mentransmisikan isinya pada setiap request ke server.

Untuk menggunakan DOM storage cukup mudah hanya dengan perintah localStorage.setItem(key, value). Untuk mengambilnya dan menghapusnya juga mudah, cukup dengan localStorage.getItem(key) dan localStorage.removeItem(key). Untuk menghapus semua DOM storage cukup dengan perintah localStorage.clear()

// Store a key-value pair.
localStorage.setItem("Sean","Purcell");

// Retrieve value string for a given key.
var storeditem = localStorage.getItem("Sean"); 

// Remove item from store.
localStorage.removeItem("Sean");

// Clear the store.
localStorage.clear();

Sekarang coba kita praktekkan membuat halaman sederhana untuk menyimpan DOM storage.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="IE=8" http-equiv="X-UA-Compatible">
<title>HTML 5.0 DOM Store</title>
<script type="text/javascript">

    var key1 = 'defaultkey';
    function getValue()
    {
        if (window.localStorage) {
            var storeditem = localStorage.getItem(key1);
            if(storeditem != null)
            {
               document.getElementById("textinput").value = storeditem;
            }
        } else {
            window.alert('Your browser does not support localStorage');
        }
    }
    function setValue()
    {
        var itemindex = document.getElementById('textinput').value;
        alert(itemindex); 
        if (window.localStorage) {
            localStorage.setItem(key1,itemindex);
        }
        else {
            window.alert('Your browser does not support localStorage');
        }
    }
    function clearItems()
    {
        localStorage.clear();
    }

    function clear_text()
    {
        document.getElementById('textinput').value = '';
    }

    </script>
</head>
<body onload="getValue();">
<h1>Type into the text area and retrieve your text from the local 
    store in Internet Explorer 8.</h1>
<div>
    Enter Text:
    <input id="textinput" onclick="clear_text();" size="60" 
        type="text" value="Your message here">
    <input onclick="setValue();" type="submit" value="Send to 
        Store"> </div>
<button onclick="clearItems();">Clear Stored selection</button>
</body>
</html>

Dalam contoh kode di atas, ketika event onLoad akan mengambil nilai yang telah disimpan dalam DOM storage dan menampilkannya pada input box. Jika dalam PC Anda belum ada data, localStorage.getItem(key) akan mengembalikan nilai null.