共享博客html5之使用web存储的具体介绍
1）使用本地存储（localstorage）:
通过全局属性localStorage访问本地存储功能，并会返回一个Storage对象，它被用来保存键/值形式的字符串对。
Storage对象的成员：
clear()——移除保存的键/值对；
getItem(key>)——取得与指定键关联的值；
立即学习“前端免费学习笔记（深入）”；
key()——取得指定索引的键；
length——返回已保存的键/值对数量；
removeItem()——移除指定键对应的键/值对；
setItem(,)——添加一个新的键/值对，如果键已使用就更新它的值；
[]——用数组的访问形式取得与指定键关联的值；
监听存储事件：
某个文档对本地存储进行修改时会触发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>文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver，会用word就会使用此编辑器，在文章系统或者是新闻系统需要文字编...
H5教程
2个月前 (10-19) 81 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候，希望开发者几乎：不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
2个月前 (10-19) 82 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
2个月前 (10-19) 82 -
Canvas and Drawables 翻译第一集
android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
2个月前 (10-19) 86 -
Canvas and Drawables 翻译第三集
Android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
2个月前 (10-19) 85