HTML5 Guide-5. Use web storage to store key-value pair data_html5 tutorial tips

< !DOCTYPE HTML>











<script> <br>displayData(); <br>var buttons = document.getElementsByTagName('button'); <br>for (var i = 0; i < buttons.length; i ) { <br />buttons[i].onclick = handleButtonPress; <br />} <br />function handleButtonPress(e) { <br />switch (e.target.id) { <br />case 'add': <br />var key = document.getElementById('key').value; <br />var value = document.getElementById('value').value; <br />localStorage.setItem(key, value); <br />break; <br />case 'clear': <br />localStorage.clear(); <br />break; <br />} <br />displayData(); <br />} <br />function displayData() { <br />var tableElement = document.getElementById ('data'); <br />tableElement.innerHTML = ''; <br />var itemCount = localStorage.length; <br />document.getElementById('count').innerHTML = itemCount; <br />for (var i = 0; i < itemCount; i ) { <br />var key = localStorage.key(i); <br />var val = localStorage.getItem(key); <br />tableElement.innerHTML = '<tr>< th>' key ':</th><td>' val '</td></tr>'; <br>} <br>} <br></script>
< ;/body>


Let’s take a look at the running results:

The browser cannot delete the data we created through localStorage unless the user deletes it.
2. Listen to Storage events
Data stored through local storage is visible to documents from the same source. For example, if you open two chrome browsers to access the same URL address, on any page The local storage created on the page is also visible to another page. However, if you use another browser (such as Firefox) to open the same URL address, the local storage will not be visible because they have different sources. The Storage event is used to monitor changes in the storage content. Let’s see what attributes it contains:
key: Returns the changed key value;
oldValue: Returns the value before the key value was changed;
newValue: Returns the new value of the changed key value;
url: The changed url address;
storageArea: Returns the changed Storage object (whether it is local storage or session storage).
Let’s look at an example below:

Item Count:	-

key	oldValue	newValue	url	storageArea

<script> <br>var tableElement = document.getElementById('data'); <br>window.onstorage = function (e) { <br>var row = '<tr>'; <br>row = '<td>' e.key '&lt ;/td>'; <br>row = '<td>' e.oleValue '</td>'; <br>row = '<td>' e.newValue '</td>'; <br>row = '<td>' e.url '</td>'; <br>row = '<td>' (e.storageArea == localStorage) '</td></ tr>'; <br>tableElement.innerHTML = row; <br>} <br></script>

Item Count:	-

<script> <br>displayData(); <br>var buttons = document.getElementsByTagName("button"); <br>for (var i = 0; i < buttons.length; i ) { <br>buttons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById("key").value; <br>var value = document.getElementById("value").value; <br>sessionStorage.setItem(key, value); <br>break; <br>case 'clear': <br>sessionStorage.clear(); <br>break; <br>} <br>displayData(); <br>} <br>function displayData() { <br>var tableElement = document.getElementById('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = sessionStorage.length; <br>document.getElementById('count').innerHTML = itemCount; <br>for (var i = 0; i < itemCount; i ) { <br>var key = sessionStorage.key(i); <br>var val = sessionStorage.getItem(key); <br>tableElement.innerHTML = "<tr><th>" key ":</th><td>" val "</td></tr>"; <br>} <br>} <br></script>