html5指南--5.使用web storage

下一站永远 · 发表于 2012-12-22 20:39:12

<div id="cnblogs_post_body">　　本节课的内容是介绍web storage，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他更好，存储的数据可以更大。有两种类型的web storage：local storage和session storage，他们使用相同的实现机制，只是可见性和生命周期不同。
　　1.使用local storage
　　我们使用localStorage对象来访问local storage，他返回Storage对象，Storage用来存储键值对的数据，他有下面一些属性和方法：
clear()：清楚存储的键值对数据；
getItem(<key>)：通过key获取value值；
key(<index>)：通过索引获取key值；
length：返回键值对的个数；
removeItem(<key>)：通过key移出指定数据；
setItem(<key>,<value>)：添加一个键值对，当指定key的键值对存在，则实现更新操作；
[<key>]：通过数组下标的方式，使用key获取指定value值。
　　
　　Storage对象允许我们存储key和value都是字符串形式的键值对数据，key是唯一的，意味着当我们使用setItem方法添加键值对时，如果key值已经存在的话，将实现更新的操作。我们来看下面的例子：
<div class="cnblogs_code"><!DOCTYPE HTML><html><head> <title>Example</title> <style> 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> <div> <div> <label>Key:</label><input id="key" placeholder="Enter Key" /></div> <div> <label>Value:</label><input id="value" placeholder="Enter Value" /></div> <div id="buttons"> <button id="add">Add</button> <button id="clear">Clear</button> </div> <p id="countmsg">There are <span id="count"></span>items</p> </div> <table id="data" border="1"> <tr> <th>Item Count:</th> <td id="count">-</td> </tr> </table> <script> displayData(); var buttons = document.getElementsByTagName('button'); for (var i = 0; i < buttons.length; i++) { buttons.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 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>' + key + ':</th><td>' + val + '</td></tr>'; } } </script></body></html>

		自动登录	找回密码
密码			立即注册