溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“HTML5中怎么使用網絡存儲存儲鍵值對的數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
1.使用本地存儲
我們使用localStorage對象來訪問本地存儲，他返回存儲對象，存儲使用存儲鍵值對的數據，，他有下面一些屬性和方法：
clear（）：清楚存儲的鍵值對數據；
getItem（<key>）：通過鍵獲取值值；
key（<index>）：通過索引獲取鍵值；
長度：返回鍵值對的個數；
removeItem（<key>）：通過鍵移出指定數據；
setItem（<key>，<value>）：添加一個鍵值對，當指定鍵的鍵值對存在時，則實現更新操作；
[<key>]：通過多重下標的方式，使用密鑰獲取指定的值值。
存儲對象允許我們存儲密鑰和值都是字符串形式的密鑰值對數據，密鑰是唯一的，意味著當我們使用setItem方法添加鍵值對時，如果key值已經存在的話，將實現更新的操作。
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
body> * {float：left;}
表{border-colla ps e：合攏； margin-left：50px；}
， td {padding：4px;}
th {text-align：right;}
輸入{border：細實黑； padding：2px;}
標簽{min-width：50px; display：inline-block; text-align：right;}
＃countmsg，＃buttons {margin-left：50px; margin-top：5px; margin-bottom：5px;}
</ style>
</ head>
<body>
<div>
<div>
<label>鍵：</ label > <輸入id =“ key”占位符=“ Enter Key” /> </ div>
<div>
<label>值：</ label> <輸入id =“ value”占位符=“輸入值” /> </ div>
<div id =“ buttons”>
<button id =“ add”>添加</ button>
<button id =“ clear”>清除</ button>
</ div>
<p id =“ countmsg”>有<span id =“ count”> </ span>項目</ p>
</ div>
<table id =“ data” border =“ 1”>
<tr>
<th>項目計數：</ th>
<td id =“ count“>-</ td>
</ tr>
</ table>
<script>
displayData（）;
var button = document.getElementsByTagName（'button'）;
for（var i = 0; i <button.length; i ++）{
button [i] .onclick = handleButtonPress;
var value = document.getElementById（'value'）。value;
localStorage.setItem（key，value）;
休息;
案例'clear'：
localStorage.clear（）;
休息;
}
displayData（）;
}
函數displayData（）{
var tableElement = document.getElementById（'data'）;
tableElement.innerHTML ='';
var itemCount = localStorage.length;
document.getElementById（'count'）。innerHTML = itemCount;
for（var i = 0; i <itemCount; i ++）{
var key = localStorage.key（i）;
var val = localStorage.getItem（key）;
tableElement.innerHTML + ='<tr> <th>'+鍵+'：</ th> <td>'+ val +'</ td> </ tr>';
</ html>
瀏覽器不能刪除我們通過localStorage的創建的數據，除非用戶刪除它。
2.監聽存儲事件
通過本地存儲存儲的數據對同源的文檔具有可見性，比如你打開兩個鍍鉻瀏覽器訪問同一個URL地址，在任何一個頁面上創建的本地存儲對另外一個頁面也是可見的。但是如果用別的瀏覽器（如firefox）打開相同的網址地址，本地存儲是不可見的，因為他們不同源了。來監聽存儲的內容發生改變的，下面我們看他包含的其他屬性：
key：返回發生改變的鍵值；
oldValue：返回發生改變鍵值以前的值值；
newValue：返回發生改變鍵值新的值值；
網址：發生改變的URL地址;
storageArea：返回發生改變的存儲對象（是本地存儲還是會話存儲）
下面我們看個例子：
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>存儲空間</ title>
<style>
表{邊界折疊：折疊；}
th，td {填充：4px；}
</ style>
</ head>
<body >
<table id =“ data” border =“ 1”>
<tr>
<th>鍵</ th>
<th> oldValue </ th>
<th> newValue </ th>
<th> url </ th>
< th> storageArea </ th>
</ tr>
</ table>
<script>
var tableElement = document.getElementById（'data'）;
window.onstorage =函數（e）{
var row ='<tr>';
行+ =' <td>'+ e.key +'</ td>';
行+ ='<td>'+ e.oleValue +'</ td>';
行+ ='<td>'+ e.newValue +'</ td>';
行+ ='<td>'+ e.url +'</ td>';
行+ ='<td>'+（e.storageArea == localStorage）+'</ td> </ tr>';
tableElement.innerHTML + =行;
}
</ script>
</ body>
</ html>
我們在例1中增刪改改存儲的數據，會在例2頁面上顯示出來。例2在chrome瀏覽器中運行正常，firefox沒有反應，其他瀏覽器沒有測試。
運行結果：
3.使用session storage
session storage在使用上和本地存儲一樣，只是他的訪問性上只進入內部頁面，并且頁面關閉后會消失，我們通過sessionStorage來訪問它。
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
body> * {float：left;}
table {border-collapse：塌陷; margin-left：50px;}
th，td { padding：4px;}
th {text-align：right;}
輸入{border：細實黑色； padding：2px;}
標簽{min-width：50px; display：inline-block; text-align：right;}
#countmsg ，#buttons {margin-left：50px; margin-top：5px; margin-bottom：5px;}
</ style>
</ head>
<body>
<div>
<div>
<label>鍵：</ label> <輸入id =“ key” placeholder =“ Enter Key” /> </ div>
<div>
<label>值：</ label> <輸入id =“ value”占位符=“輸入值” /> </ div>
<div id =“ buttons”>
<button id =“ add”>添加</ button>
<button id =“ clear”>清除</ button>
</ div>
<p id =“ countmsg”>有<span id =“ count”> </ </ span>項目</ p>
</ div>
<table id =“ data” border =“ 1”>
<tr>
<th>項目計數：</ th>
<td id =“ count”>-</ td>
</ tr>
</ table>
<iframe src =“ storage.html” width =“ 500” height =“ 175”> </ iframe>
<script>
displayData（）;
var button = document.getElementsByTagName（“ button”）;
for（var i = 0; i <button.length; i ++）{
button [i]。onclick = handleButtonPress;
}
函數handleButtonPress（e）{
開關（e.target.id）{
案例'add'：
var key = document.getElementById（“ key”）。value;
var value = document.getElementById（“ value”）。value;
sessionStorage.setItem（key，value）;
休息;
案例'clear'：
sessionStorage.clear（）;
休息;
}
displayData（）;
}
函數displayData（）{
var tableElement = document.getElementById（'data'）;
tableElement.innerHTML ='';
var itemCount = sessionStorage.length;
document.getElementById（'count'）。innerHTML = itemCount;
for（var i = 0; i <itemCount; i ++）{
var key = sessionStorage.key（i）;
var val = sessionStorage.getItem（key）;
tableElement.innerHTML + =“ <tr> <th>” +鍵+“：</ th> <td>” + val +“ </ td> </ tr>
</ html>
你在例3中做任何修改，例2的頁面不會發生任何改變。
“HTML5中怎么使用網絡存儲存儲鍵值對的數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
