HTML5 Game - Catching Events in Local Storage

Introduction

The storageEvent Attributes
Attribute	Type	Purpose
key	DOMString	The key on which the change occurred
oldValue	DOMString	The old value
newValue	DOMString	The new value
url	DOMString	The URL of page that made the change
storageArea	Storage	The storage area that this update occurred in
Demo

ResultView the demo in separate window
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>11.5 Storing Notes in Local Storage</title>
    <style>
        body {/*from ww w.  j av  a2  s  .c o m*/
            padding: 20px;
        }

        h1 {
            font-size: 120%;
            margin: 0 0 .5em;
        }

        section {
            width: 300px;
        }

        #noteBoard,
        textarea {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
            -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);
        }

        #noteBoard {
            background: #FCFABA;
            float: right;
            padding: 10px 20px;
        }

        #noteBoard div {
            border-bottom: 1px dashed #CCC;
            margin: 0 0 5px;
            padding: 5px 0;
            width: 100%;
        }

        #noteBoard div.buttons {
            border: none;
        }

        #addNote,
        #updateNote {
            float: left;
        }

        #addNote {
            border-right: 1px dashed #ccc;
            margin: 0 50px 0 0;
            padding: 0 50px 0 0;
        }

        #updateNote {
            display: none;
        }

        textarea {
            border: none;
            clear: both;
            height: 150px;
            margin: 0 0 10px;
            padding: 10px;
            width: 280px;
        }

        input[type="text"] {
            margin: 0 0 10px;
            padding: 4px;
        }

        button {
            padding: 5px;
        }
    </style>

    <script>
        let keyCode = 'note';
        function initNoteBoard() {
            window.addEventListener('storage', onStorageEvent, false);
            let btnAddNote = document.getElementById('btnAddNote');
            let btnUpdateNote = document.getElementById('btnUpdateNote');
            btnAddNote.addEventListener('click', addNote, false);
            btnUpdateNote.addEventListener('click', updateNote, false);
            updateNoteBoard();
        }
        function onStorageEvent(eventObj) {
            if (eventObj.storageArea == localStorage) {
                console.log(eventObj.key + ' changed from "' +
                    eventObj.oldValue +
                    '" to "' +
                    eventObj.newValue + '".');
                updateNoteBoard();
            }
        }
        function addNote() {
            let numNotes = parseInt(localStorage.getItem('numNotes'));
            if (isNaN(numNotes)) {
                numNotes = 0;
            }
            let noteKey = keyCode + numNotes;
            let noteValue = document.getElementById('note').value;
            localStorage.setItem(noteKey, noteValue);
            numNotes++;
            localStorage.setItem('numNotes', numNotes);
            updateNoteBoard();
            document.getElementById('note').value = '';
        }
        function changeNote(noteKey) {
            document.getElementById('oldKey').value = noteKey;
            document.getElementById('oldNote').value = localStorage.getItem(noteKey);
            document.getElementById('updateNote').style.display = 'block';
        }
        function updateNote() {
            let key = document.getElementById('oldKey').value;
            let note = document.getElementById('oldNote').value;
            localStorage.setItem(key, note);
            document.getElementById('updateNote').style.display = 'none';
            document.getElementById('oldKey').value = '';
            document.getElementById('oldNote').value = '';
            updateNoteBoard();
        }
        function removeNote(noteKey) {
            let numNotes = parseInt(localStorage.getItem('numNotes'));
            keyIdx = parseInt(noteKey.substring(keyCode.length, noteKey.length));
            for (let i = keyIdx; i < numNotes; i++) {
                localStorage.setItem(keyCode + i, localStorage.getItem(keyCode + (i + 1)));
            }
            numNotes--;
            localStorage.setItem('numNotes', numNotes);
            localStorage.removeItem(keyCode + numNotes);
            updateNoteBoard();
        }
        function clearAllNotes() {
            let numNotes = parseInt(localStorage.getItem('numNotes'));
            if (isNaN(numNotes)) {
                numNotes = 0;
            }
            for (let i = 0; i < numNotes; i++) {
                localStorage.removeItem(keyCode + i);
            }
            localStorage.setItem('numNotes', '0');
            updateNoteBoard();
        }
        function updateNoteBoard() {
            let noteBoard = document.getElementById('noteBoard');
            let numNotes = parseInt(localStorage.getItem('numNotes'));
            if (isNaN(numNotes)) {
                numNotes = 0;
            }
            let notes = '<div>My Notes:</div>';
            let key = '';
            let value = '';
            for (let i = 0; i < numNotes; i++) {
                key = keyCode + i;
                value = localStorage.getItem(key);
                notes += '<div><p>' + value + '</p><div class="buttons">' +
                    '<button onclick="changeNote(\'' + key + '\');">Change</button>' +
                    '<button onclick="removeNote(\'' + key + '\');">Remove</button>' +
                    '</div>' +
                    '</div>';
            }
            notes += '<div style="float:right;"><button id="clearAllNotes">Remove All Notes</button></div>';
            noteBoard.innerHTML = notes;
            let btnClearAllNotes = document.getElementById('clearAllNotes');
            btnClearAllNotes.addEventListener('click', clearAllNotes, false);

        }
        window.addEventListener('load', initNoteBoard, false);
    </script>
</head>

<body>
    <section id="noteBoard"></section>
    <section id="addNote">
        <h1>Add a new note here:</h1>
        <textarea name="note" id="note"></textarea>
        <button id="btnAddNote">Add Note</button>
    </section>
    <section id="updateNote">
        <h1>Update the note</h1>
        <input type="text" name="oldKey" id="oldKey" disabled />
        <textarea name="oldNote" id="oldNote"></textarea>
        <button id="btnUpdateNote">Update Note</button>
    </section>
</body>

</html>
HTML5 Game - Catching Events in Local Storage

Introduction

Demo

Related Topic
