之前，我们在客户端存储数据都是使用cookie的方式，但是，cookie不适合大量数据的传递，cookie的速率和效率都很低，于是html5引入了在客户端存储数据的新方式：
- localStorage
- sessionStorage
第一部分： localStorage
localStorage存储数据是没有时间限制的，即使过了一年，数据依然可用。
创建localStorage可以使用localStorage.setItem()方法，该方法接收两个参数，第一个是键名，第二个是键值。
读取localStorage可以使用localStorage.getItem()方法，该方法接收一个参数，即键名。
举例如下：
<script> localStorage.setItem("name", "朱振伟"); localStorage.setItem("sex", "男"); localStorage.setItem("age", 21); document.write(localStorage.getItem("name")+"<br/>"); document.write(localStorage.getItem("sex")+"<br/>"); document.write(localStorage.getItem("age")+"<br/>"); </script>
最终的效果如下所示：
创建数据的方式还有一种，就是直接添加给localStorage，如下所示：
localStorage.test = "good"; document.write(localStorage.test+"<br/>"); document.write(localStorage.getItem("test"));
最终的效果如下：
除此之外，我们还可以使用它来对用户访问页面的次数进行计数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage实现页面计数</title> <style> div.wrap { font-size: 20px; } div.wrap span { font-size: 30px; font-style: italic; text-shadow: 0 0 5px blue; letter-spacing: 10px; } </style> </head> <body> <div class="wrap">您第<span class="time"></span>次来到这里了</div> <script> if (localStorage.pagecount === undefined) { localStorage.setItem("pagecount", 0); } else { localStorage.pagecount = Number(localStorage.pagecount) + 1; } document.querySelector(".time").innerHTML = localStorage.pagecount; </script> </body> </html>
我们可以发现，只要我们刷新一次页面，计数就会增加1，即使我们关掉了浏览器，然后再次打开这个页面，也可以发现计数是
没有中断的。 这就是localStorage的local之意了。
说明：一般而言， localStorage存储的数据都在下面的路径中：
C:UsersUsernameAppDataLocalGoogleChromeUser DataDefaultLocal Storage
我们也可以打开chrome控制台，然后进入application就可以发现 localStorage 的选项了。
进来之后，我们还可以编辑存储的数据，或者删除存储的数据。
注意： 当我们在编辑器中创建localStorage之后，刷新页面，就可以看到保存的localStorage了。
第二部分：sessionStorage
sessionStorage和localStorage十分相似，唯一的区别在于 -- sessionStorage 方法针对一个session进行数据存储，当用户关闭浏览器之后，数据就会被删除，而localStorage存储的数据即使在浏览器关闭之后也不会被删除。
在创建和获取sessionStorage时，方法与前者一致，如下：
sessionStorage.test = "hahah"; sessionStorage.setItem("name", "zzw"); sessionStorage.setItem("age", 21); document.write(sessionStorage.test + "<br/>"); document.write(sessionStorage.getItem("name") + "<br/>"); document.write(sessionStorage.getItem("age") + "<br/>");
效果如下：
这时，我们查看sessionStorage, 如下：
然后，我把此页面关掉，然后再把html中的相关代码注释，可以发现已经没有sessionStorage。
而如果采用同样的做法， localStorage存储的数据依旧会在。
举一个例子：
<!DOCTYPE html> <html> <head> <script> function clickCounter() { sessionStorage.setItem("clickcount", 1); // 虽然在这里我设置的是数字1， 但是输出之后就成了字符串, 即sessionStorage只能存储字符串 console.log("第一次", typeof sessionStorage.clickcount); // 第一次 string document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 1 次。"; // 注意：这里我使用了自定义函数的模式 clickCounter = function () { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">请点击这里</button></p> <div id="result"></div> <p>请点击按钮使计数器递增。</p> <p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p> </body> </html>
注意： 在上面的这个例子中，我使用了自定义函数的模式，因为我们对于其中的某些语句只需要使用一次，所以可以使用这种模式，更多可以看我的文章《JavaScript模式》。
另外，我们也可以使用sessionStorage来实现统计访问次数，但是每次在关闭浏览器之后就会停止计数了。
上面只是介绍了localStorage和sessionStorage的主要的方法，下面的例子中有更多的方法实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webstorage</title> </head> <body> <script> localStorage.setItem("zzw", "shuaiq"); localStorage.removeItem("zzw"); console.log(localStorage.getItem("zzw")); // null 因为在上一行被我删去了 console.log(localStorage.length); // 8 获得本地存储的条数 localStorage.setItem("ht", "beau"); console.log(localStorage.ht); // beau 这里我们可以直接使用key，即键名来获取键值。 localStorage.clear(); console.log(localStorage.length); // 0 即通过clear命令可以删除所有的本地存储 </script> </body> </html>