当前位置 : 主页 > 网页制作 > html >

cookie,localStorage,sessionStorage的区别

来源:互联网 收集:自由互联 发布时间:2021-06-12
一、概念 Cookie 什么是Cookie —— Cookie 是一些数据, 存储于你电脑上的文本文件中。 localStorage 什么是 localStorage —— localStorage 是指将信息数据存储在客户端本地的硬件上,即使浏览器被

一、概念

  1. Cookie
    • 什么是Cookie —— Cookie 是一些数据, 存储于你电脑上的文本文件中。
  2. localStorage
    • 什么是 localStorage —— localStorage 是指将信息数据存储在客户端本地的硬件上,即使浏览器被关闭了,信息数据同样存在
  3. sessionStorage
    • 什么是 sessionStorage —— sessionStorage 是指将信息数据存储在session对象中,所以当浏览器关闭后,sessionStorage也随之清空

 

二、如何使用(一些API和常见用法)

  1. Cookie(参考菜鸟教程https://www.runoob.com/js/js-cookies.html
    • 创建Cookie
      document.cookie = username=Doe;    // 基本设置
      
      document.cookie = username=Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT;     // 基本设置 + 过期时间(默认情况下cookie在浏览器关闭时删除)
    • 读取Cookie
      var x = document.cookie;        // 读取cookie
    • 修改Cookie
      // 给key重新赋值即可,例如原来的username=Doe,修改为John
      document.cookie = username=John;
    • 获取Cookie值得函数
      function getCookie(cname){
          var name = cname + =;
          var ca = document.cookie.split(;);
          for(var i = 0; i < ca.length; i++){
              var c = ca[i].trim();    // trim()用于除去前后空格
              if(c.indexOf(name) == 0) return c.substring(name.length, c.length);
           }
           return ‘‘;
      }
    • 检测Cookie是否存在
      // 检测cookie中是否有我们想要得数据,可以使用getCookie函数(上面那个↑
      
      function checkCookie() {
          var username = getCookie(username);
          if(username == ‘‘){
              alert(welcome);
          }
          else {
              username = prompt(Please enter your name:, ‘‘);
              if(username != ‘‘ && username != null){
                  setCookie(username, username, 365);
              }
          }
      }
      
      // 设置cookie
      function setCookie(key, value, time){
          var d = new Date();
          d.setTime(d.getTime() + (time * 24 * 60 * 60 * 1000));
          var expires = expires= + d.toGMTString();
           document.cookie = key + = + value + ";" + expires;
      }
  2. localStorage
    • 新建localStorage
      localStorage.setItem(key, value);
    • 查询localStorage里的value
      localStorage.getItem(key);
    • 清除某一个localStorage
      localStorage.removeItem(key);
    • 清除所有得localStorage
      localStorage.clear();
    • 获取localStorage里得所有key和值
      function getAll() {
          var valueArr = [];
         var keyArr = [];
      for(var i = 0; i < localStorage.length; i++){ var key = localStorage.getKey(i);
      keyArr.push(key); valueArr.push(localStorage.getItem(key); }
      return newArr; }
  3. sessionStorage
    • API与localStorage一致

 

三、cookie、sessionStorage、localStorage 的区别

  1. 大小
    • cookie: 4K左右,很小很小;
    • sessionStorage 和 localStorage:5M;
  2. 有效期
    • cookie:使用expire设置过期时间
    • sessionStorage:浏览器关闭则清空,生命周期为仅在当前对话下
    • localStorage:不手动清空则不会清除,生命周期为永远
  3. 是否会将数据发给服务器
    • cookie:每次访问都会传送cookie给服务器,即使是不需要的时候,这样会浪费带宽
    • sessionStorage 和 localStorage:不传送

---------------------------------------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------------------------

多说一点点 T^T

cookie 如何防范XSS攻击

XSS 是指攻击者在返回的HTML中嵌入JS脚本,为减轻这些攻击,需要在HTTP头部配上set-cookie: 

httponly: 这个属性可以防止XSS,因为他会禁止JavaScript脚本来访问cookie

secure: 这个属性告诉浏览器仅在请求为https的时候发送cookie

 

 

挖个坑,详细的cookie如何防范xss(2019/9/12)

网友评论