cookie与本地存储localStorage

cookie

什么是cookie

• cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。
• 一般在页面中用来保存信息。比如：自动登录 填充用户名等。

cookie的作用

• cookie的功能: 在浏览器中进行数据的存储用户名、密码等。
  • cookie的主要作用是保存信息，并与服务器互动，因此在很多情况下都可以使用到cookie。
  • 密码 cookie：访当问者首次访问页面时，也许会填写密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

cookie的特性

• cookie必须运行在服务器的环境下（开启服务器）

• cookie的容量: 5kb；

• cookie存储的数据类型: 字符串；

• cookie的作用域为当前域，有文件夹路径的区分。

  • 在这个域（文件夹）中任何文件都可以写cookie， 存储的位置都是以这个域作为存储空间的，别的域不能访问当前域。
  • 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。

• Cookie默认是临时存储的，当浏览器关闭时，自动销毁。

  • 刷新页面时可以使用；
  • 跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容

• 如果想长时间存放一个cookie，同时需要设置一个过期时间。

  • cookie设置过期时间

    var date=new Date();
    date.setMinutes(6);
    document.cookie="name=wanggaoquan;expires="+date.toUTCString();
    

  • 删除以及设置了过期失效的cookie

    Utils.setCookie("password","",new Date());
    Utils.setCookie("user","",new Date());
    

cookie的缺点

• ie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
• cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
• cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
• cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

创建cookie

• 在JavaScript中，可以通过cookie名和值的方式来创建cookie。

• 一个网站可以创建多个cookie，不同的cookie可以拥有不同的值。例如将用户名和密码存在cookie中，那么就有可能用到两个cookie：一个cookie用于存放用户名，另一个cookie用于存放密码。使用Document对象的cookie属性可以用来设置与读取cookie。

  document.cookie="name=lisi";
  document.cookie="name=zhangsan"; // key值相同会被覆盖掉
  console.log(document.cookie);   
  

  Cookie默认是临时存储的，当浏览器关闭时，自动销毁

获取cookie的值

• 使用document对象的cookie属性可以获得的cookie，准确点说应该是可以获得cookie文件的内容。事实上cookie文件中存放的就是一个字符串，而这个字符串包含了当前网站目录下的所有cookie的名字和值。因此，在获取指定的cookie时，还需要使用String对象中的方法才能获得需要的cookie值。

  document.cookie  //获取cookie值
  var obj= getCookie();
    console.log(obj)
    function getCookie(){
      return document.cookie.split(/;\s*/).reduce((value,item)=>{
            // console.log(item.match(/([^=]+)=([^=]+)/).slice(1));
            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 d= new Date();
  d.setHours(d.getHours() + (24 * 30)); //保存一个月
  document.cookie = "visited=yes; expires=" + d.toUTCString();
  

本地存储localStorage

webStorage

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

webStorage分类

• localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
• sessionStorage：会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。
• localStorage 和 sessionStorage都是window对象的属性

localStorageAPI

• setItem() 存储数据

• getItem() 获取本地存储的值

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

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

  localStorage.setItem("name","wanggaoquan");
  localStorage.getItem("name")
  localStorage.removeItem("name");  //删除某个数据
  localStorage.clear();   //清除所有数据
  

存储数据的三种方法

• setItem()

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

• localStorage.keyname = value;

• localStorage[‘keyname’] = value;

  【注】localStorage是长期数据存储，sessionStorage临时存储。

  【注】只能存储字符串

读取数据的三种方法

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

删除数据的两种方法

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

通过JSON存储对象方式

var arr=[1,2,3];
localStorage.arr=JSON.stringify(arr);
var arr=JSON.parse(localStorage.arr);
console.log(arr);

localStorage、sessionStorage与cookie的区别

• cookie cookie会自动携带数据发送给服务器，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

• 存储大小限制的不同。
  cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

• 数据有效期不同。
  sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

• 作用域不同。
  sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

• Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

• Web Storage 的 api 接口使用更方便。