Cookie, LocalStorage 与 SessionStorage说明

Posted 万象IT

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cookie, LocalStorage 与 SessionStorage说明相关的知识，希望对你有一定的参考价值。

 一、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>

三、三者异同

特性CookielocalStoragesessionStorage
数据的生命期 可设置失效时间，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 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

 

以上是关于Cookie, LocalStorage 与 SessionStorage说明的主要内容，如果未能解决你的问题，请参考以下文章

sessionStorage localStorage 和 cookie 之间的区别

localStorage使用总结 JS 详解 Cookie LocalStorage 与 SessionStorage

Cookie, LocalStorage 与 SessionStorage

JWT LocalStorage 与 Cookie

Cookie, LocalStorage 与 SessionStorage说明

cookie,localStorage,sessionStorage的特点与区别。