一、Cookie
Cookie 大小限制为4KB左右,不适合大量数据的存储。因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
HttpCookie cookie = new HttpCookie("MyCookieName", "string value"); Response.Cookies.Add(cookie);
二、localStorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
示例如下
<!DOCTYPE html> <html> <body> <div id="result"></div> <script> if (typeof(Storage) !== "undefined") { // 存储 localStorage.setItem("lastname", "Gates"); // 检索 document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ..."; } </script></body>
</html>
三、sessionStorage
sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
<!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; } else { document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">请点击这里</button></p> <div id="result"></div> <p>请点击按钮使计数器递增。</p> <p>请关闭浏览器或标签页,然后再试一次,计数器会重置。</p> </body> </html>
三、三者异同
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 可设置失效时间,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
参考文档:https://segmentfault.com/a/1190000002723469
http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html