cookie,localStorage,sessionStorage的区别

一、概念

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）