Rumah > Artikel > hujung hadapan web > html5之使用web存储的具体介绍
html5之使用web存储的具体介绍
- 黄舟asal
- 2017-03-15 16:00:031249semak imbas
1）使用本地存储（localStorage）:
通过全局属性localStorage访问本地存储功能，并会返回一个Storage对象，它被用来保存键/值形式的字符串对。
Storage对象的成员：
clear()——移除保存的键/值对；
getItem(b426c87d5d3d3a1fd68262c64998cac2)——取得与指定键关联的值；
key(64531295cb863c6c1bc26fe1360fcf6c)——取得指定索引的键；
length——返回已保存的键/值对数量；
removeItem(42538adbdb6240b2b083a000a615d5bd)——移除指定键对应的键/值对；
setItem(42538adbdb6240b2b083a000a615d5bd,8487820b627113dd990f63dd2ef215f3)——添加一个新的键/值对，如果键已使用就更新它的值；
[42538adbdb6240b2b083a000a615d5bd]——用数组的访问形式取得与指定键关联的值；
监听存储事件：
某个文档对本地存储进行修改时会触发storage事件，同时指派的对象是一个StorageEvent对象，其成员有：
key——返回发生变化的键；
oldValue——返回关联此键的旧值；
newValue——返回关联此键的新值；
url——返回制造变化的文档URL;
storageArea——返回发生变化的Storage对象；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons{
margin-left: 50px;
margin-top:5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<p>
<label>Key:</label>
<input id="key" placeholder="Enter Key">
</p>
<p>
<label>Value:</label>
<input id="value" placeholder="Enter Value">
</p>
<p id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</p>
<p id="countmsg">There are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
<tr>
<th>Item Count:</th><td>-</td>
</tr>
</table>
<script>
displayData();
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById("key").value;
var value=document.getElementById("value").value;
localStorage.setItem(key,value);
break;
case 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData(){
var tableElem=document.getElementById("data");
tableElem.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[key];
tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
</style>
</head>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldValue</th>
<th>newValue</th>
<th>url</th>
<th>storageArea</th>
</tr>
</table>
<script>
var tableElem=document.getElementById("data");
window.onstorage=handleStorage;
function handleStorage(e){
var row="<tr>";
row+="<td>"+ e.key+"</td>";
row+="<td>"+ e.oldValue+"</td>";
row+="<td>"+ e.newValue+"</td>";
row+="<td>"+ e.url+"</td>";
row+="<td>"+ (e.storageArea == localStorage)+"</td></tr>";
tableElem.innerHTML+=row;
}
</script>
</body>
</html>2）使用会话存储（sessionStorage）
会话存储的工作方式和本地存储很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档关闭时移除。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
body > *{
float:left;
}
table{
border-collapse: collapse;
margin-left: 50px;
}
th,td{
padding: 4px;
}
th{
text-align: right;
}
input{
border:thin solid black;
padding: 2px;
}
label{
min-width: 50px;
display: inline-block;
text-align: right;
}
#countmsg,#buttons {
margin-left: 50px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<p>
<label>Key:</label>
<input id="key" placeholder="Enter Key">
</p>
<p>
<label>Value:</label>
<input id="value" placeholder="Enter Value">
</p>
<p id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</p>
<p id="countmsg">There are <span id="count"></span> items</p>
</p>
<table id="data" border="1">
<tr>
<th>Item Count:</th><td>-</td>
</tr>
</table>
<script>
displayData();
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
switch(e.target.id){
case 'add':
var key=document.getElementById("key").value;
var value=document.getElementById("value").value;
sessionStorage.setItem(key,value);
break;
case 'clear':
sessionStorage.clear();
break;
}
displayData();
}
function displayData(){
var tableElem=document.getElementById("data");
tableElem.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[key];
tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";
}
}
</script>
</body>
</html>Atas ialah kandungan terperinci html5之使用web存储的具体介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html5之创建离线Web应用程序的示例代码Artikel seterusnya：详解html5的web存储与cookie的区别