Web Storage分为两种：
- sessionStorage
- localStorage
从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；
这样做的好处是缓存数据和减少内存的占用；
不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。
这样做的好处有：
1. 缓存数据
2. 减少对内存的占用.
对于localStorage的操作
1.将对象存入到localStorage
1 <script type="text/javascript"> 2 var obj = { name:'Jim' }; 3 var str = JSON.stringify(obj); 4 //存入 5 localStorage.obj = str; 6 </script>
2.从localStorage读取数据
1 <script type="text/javascript"> 2 var obj = { name:'Jim' }; 3 var str = JSON.stringify(obj); 4 //存入 5 localStorage.obj = str; 6 //读取 7 str = localStorage.obj; 8 document.write(str); 9 //重新转换为对象 10 obj = JSON.parse(str); 11 </script>
3.例子
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Example</title> 5 <style> 6 body > * { 7 float: left; 8 } 9 10 table { 11 border-collapse: collapse; 12 margin-left: 50px; 13 } 14 15 th, td { 16 padding: 4px; 17 } 18 19 th { 20 text-align: right; 21 } 22 23 input { 24 border: thin solid black; 25 padding: 2px; 26 } 27 28 label { 29 min- 50px; 30 display: inline-block; 31 text-align: right; 32 } 33 34 #countmsg, #buttons { 35 margin-left: 50px; 36 margin-top: 5px; 37 margin-bottom: 5px; 38 } 39 </style> 40 </head> 41 <body> 42 <div> 43 <div> 44 <label>Key:</label><input id="key" placeholder="Enter Key" /> 45 </div> 46 <div> 47 <label>Value:</label><input id="value" placeholder="Enter Value" /> 48 </div> 49 <div id="buttons"> 50 <button id="add">Add</button> 51 <button id="clear">Clear</button> 52 </div> 53 <p id="countmsg">There are <span id="count"></span>items</p> 54 </div> 55 <table id="data" border="1"> 56 <tr> 57 <th>Item Count:</th> 58 <td id="count">-</td> 59 </tr> 60 </table> 61 <script> 62 displayData(); 63 var buttons = document.getElementsByTagName("button"); 64 for (var i = 0; i < buttons.length; i++) { 65 buttons[i].onclick = handleButtonPress; 66 } 67 function handleButtonPress(e) { 68 switch (e.target.id) { 69 case 'add': 70 var key = document.getElementById("key").value; 71 var value = document.getElementById("value").value; 72 sessionStorage.setItem(key, value); 73 break; 74 case 'clear': 75 sessionStorage.clear(); 76 break; 77 } 78 displayData(); 79 } 80 function displayData() { 81 var tableElement = document.getElementById('data'); 82 tableElement.innerHTML = ''; 83 var itemCount = sessionStorage.length; 84 document.getElementById('count').innerHTML = itemCount; 85 for (var i = 0; i < itemCount; i++) { 86 var key = sessionStorage.key(i); 87 var val = sessionStorage.getItem(key); 88 tableElement.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>"; 89 } 90 } 91 </script> 92 </body> 93 </html>