学习笔记（二）Cookie与本地存储

Cookie与本地存储

(一)cookie

• 什么是cookie
  实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。

• cookie的功能
  在浏览器中进行数据的存储,用户名、密码

• cookie必须运行在服务器的环境下（开启服务器）
  ① cookie的容量: 5kb
  （1KB=1024字节＝512汉字）
  （但是这个是针对当前文件夹路径的存储，子文件夹将会有新的存储空间）
  ② cookie存储的数据类型: 字符串
  ③ cookie存放以域名形式区分的。
  ④ 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。
  （不同域名的存储是无法共享的）
  ⑤ Cookie默认是临时存储的，当浏览器关闭时，自动销毁。
  （表示退出浏览器软件，不是关闭页面）
  ⑥ 如果想长时间存放一个cookie，同时需要设置一个过期时间。
  （在退出浏览器的情况下也能在设定时间内存储）
  ⑦ 如果浏览器中设置了不存储cookie或者手动清除cookie，以上内容都会丢失
  （Google：页面设置-更多工具 里可找到）

• cookie的缺点
  ① cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
  ② cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
  ③ cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
  ④ cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
  ⑤在打开网址时或者提交表单时自动裹挟着cookie数据发送到服务器，并且服务端程序可以，继续裹挟着新的cookie内容存储在你的电脑的cookie中。（可了解XSS攻击）

• 创建cookie

  document.cookie = “username=value”;
  

  一个网站可以创建多个cookie，不同的cookie可以拥有不同的值：

  // 如何多个内容存储
  var obj = {
      user: "xiaoming",
      age: 20,
      sex: "男"
  }
  function setCookie(obj, date) {
      for (var prop in obj) {
          document.cookie = prop + "=" + obj[prop] + (date ? ";expires=" + date.toUTCString() : "");
      }
  }
  function setCookie1(key, value, date) {
      document.cookie = key + "=" + value + (date ? ";expires=" + date.toUTCString() : "");
  }
  var date = new Date();
  date.setFullYear(2022);
  setCookie(obj, date);
  

• 获取cookie的值

  document.cookie
  

  获取多个值

  //创建cookie在上面的代码
  var o = getCookie();
  console.log(o);
  
  function getCookie() {
      return document.cookie.split("; ").reduce((value, item) => {
          var arr = item.split("=");
          value[arr[0]] = isNaN(arr[1]) ? arr[1] : Number(arr[1]);
          return value;
      }, {});
  }
  

• cookie的生存期
  在默认情况下，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。如果想要cookie在浏览器窗口之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie的终止日期，在这个终止日期到达之前，浏览器都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。

  //document.cookie = “名称=值；expires=” + 时间；（时间必须是一个字符串）
  var date=new Date();
  date.setMinutes(12);
  console.log(document.cookie);
  var a=Number(document.cookie.split("=")[1]);
  a++;
  document.cookie="a="+a+";expires="+date.toUTCString();
  

(二)WebStorage

• 包括localStorage 和 sessionStorage，都是window对象的属性。
• HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。
• 这些数据可以是临时的（浏览器一关就自动删除），或者是长期存在的（无论多少天之后打开网 - 站，仍然可以访问这些数据）。

1. localStorage

• 解释：本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
• 方法：
  setItem() 存储数据

  setItem()
  语法：localStorage.setItem(“keyname”,value)
  功能：在本地存储中以key键/值的方式存储数据
  说明：
  keyname    键名
  value          存储的值
  localStorage.keyname = value;
  localStorage['keyname'] = value;
  

  getltem() 获取本地存储的值

  setItem()
  getItem()
  语法：localStorage.getItem(“keyname”)
  功能：获取本地存储中的数据
  说明：
  keyname    键名
  localStorage.keyname
  localStorage['keyname']
  

  removeltem() 删除指定key本地存储的值

  removeItem()
  语法：localStorage.removeItem(“keyname”)
  功能：删除指定的本地存储中的数据
  说明：
  keyname    键名
  

  clear() 清空网站在本地保存的所有数据

  clear()
  语法：localStorage.clear(  )
  功能：清空本地存储中的所有的数据
  

2. sessionStorage

• 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

(三)localStorage、sessionStorage与cookie的区别

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 存储大小限制不同:
  cookie数据不能超过4k;
  sessionStorage和localStorage 可以达到5M或更大。
• 数据有效期不同:
  sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
  localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同:
  sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
  localStorage 在所有同源窗口中都是共享的；
  cookie也是在所有同源窗口中都是共享的。
• Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
• Web Storage 的 api 接口使用更方便。