html5之使用web存储的具体介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5之使用web存储的具体介绍,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5229字,纯文字阅读大概需要8分钟。
内容图文
1)使用本地存储(localStorage):通过全局属性localStorage访问本地存储功能,并会返回一个Storage对象,它被用来保存键/值形式的字符串对。
Storage对象的成员:
clear()——移除保存的键/值对;
getItem(<key>)——取得与指定键关联的值;
key(<index>)——取得指定索引的键;
length——返回已保存的键/值对数量;
removeItem(<key>)——移除指定键对应的键/值对;
setItem(<key>,<value>)——添加一个新的键/值对,如果键已使用就更新它的值;
[<key>]——用数组的访问形式取得与指定键关联的值;
监听存储事件:
某个文档对本地存储进行修改时会触发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>
以上就是html5之使用web存储的具体介绍的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的html5之使用web存储的具体介绍全部内容,希望文章能够帮你解决html5之使用web存储的具体介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。