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 接口使用更方便。