HTML5 Game - Local Storage Local Storage

Using Web Storage

Web storage can store simple key/value data in the browser.

Web storage is similar to cookies and we can store larger amounts of data.

There are two kinds of web storage:local storage and session storage.

Local Storage

We access the local storage via the localStorage global property.

This property returns a Storage object described in the following table.

The Storage object is used to store pairs of strings, organized in key/value form.

Name	Description	Returns
clear()	Removes the stored key/value pairs	void
getItem(<key>)	Gets the value associated with the specified key	string
key(<index>)	Gets the key at the specified index	string
length	Gets the number of stored key/value pairs	number
removeItem(<key>)	Removes the key/value pair with the specified key	string
setItem(<key>, <value>)	Adds a new key/value pair or updates the value if the key has already been used	void
[<key>]	Array-style access to retrieve the value associated with the specified key	string

The Storage object can store key/value pairs where both the key and the value are strings.

Keys must be unique.

The value is updated if we call the setItem method using a key that already exists in the Storage object.

The following code shows how we can add, modify, and clear the data in the local storage.

Demo

ResultView the demo in separate window

<!DOCTYPE HTML>
<html>
    <body>
        <div>
            <div><label>Key:</label><input id="key" placeholder="Enter Key"/></div>            
            <div><label>Value:</label><input id="value" placeholder="Enter Value"/></div>
            <div id="buttons">
                <button id="add">Add</button>
                <button id="clear">Clear</button>
            </div>
            <p id="countmsg">There are <span id="count"></span> items</p>
        </div>
        /*  w  w  w.j  a  v  a  2s  .  c om*/
        <table id="data" border="1">
            <tr><th>Item Count:</th><td id="count">-</td></tr>
        </table>

        <script>        
            displayData();
                        
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }

            function handleButtonPress(e) {
                switch (e.target.id) {
                    case 'add':
                        let key = document.getElementById("key").value;
                        let value = document.getElementById("value").value;
                        localStorage.setItem(key, value);
                        break;
                    case 'clear':
                        localStorage.clear();
                        break;
                }
                displayData();
            }
         
            function displayData() {
                let tableElem = document.getElementById("data");
                tableElem.innerHTML = "";
                let itemCount = localStorage.length;
                document.getElementById("count").innerHTML = itemCount;
                for (let i = 0; i < itemCount; i++) {
                    let key = localStorage.key(i);
                    let val = localStorage[key];
                    tableElem.innerHTML += "<tr><th>" + key + ":</th><td>"
                        + val + "</td></tr>";    
                }
            }
        </script>
    </body>
</html>

The browser will delete the data we add using the localStorage object when the user clears the browsing data.

HTML5 Game - Local Storage Local Storage

Using Web Storage

Local Storage

Demo

Related Topics