cookie
实质的工作是保存状态。
为什么会有cookie?
因为http是无状态协议
http 无状态协议(上下文无关协议)在浏览器中,两个执行成功的请求是没有关系的。比如一个电商页面,两次加入购物车会请求时,但是两次请求没有关系。浏览器就不知道选择了。登录状态也是。登录一次成功取到了,刷新页面登录状态又不见了,后面就没有关系了。这时候就需要用到cookie来记录状态了。
浏览器第一次请求数据的时候,服务端会把cookie携带在数据中。浏览器再进行请求时,会把cookie传回去,这样服务端就能识别了。
同样的域名下的话,每次请求都会传cookie,所以cookie数据多的话开销就大了,所以可以用它来存比较重要的。或者简洁的数据。
cookie属性
登录时,cookie里面有个id可以供服务器识别。cookie存在浏览器里面。cookie数量在50个左右,大小在4kb左右。超过就会删除。
cookie每次只能设置一个,就是name只有一个
存在document上
// 这样就算两个name了,不能这样子设置
document.cookie='name=xiaowang;age=18';
// 这样设置的话,name加name属性上,把xiaowang加在value属性上。后面算是第二个了。所以无效。
// 这样设置才是正确的。
document.cookie="margin=123;path=/;expires="+new Date(2008,1,1); // 1 是 二月
- name (cookie的名字,名字唯一性)
- value (cookie的值, 经过加密)
- Domain (由他来决定哪个域可以用到这个cookie,在哪个域下有效)
- Path (cookie有效使用的路径,和domain一起使用,然后在限定的地址可以使用(domain+path限制)。)domain和path都要正确才能访问到cookie
- Expires (确定cookie的过期时间,到什么时候结束,格式为GMT, new Date(2008,1,1) 这个new Date是取的电脑右下角的时间。 默认值(session)浏览器关闭就没了)
- size (大小)
- max-age (存活多长时间)
-1 临时的不存在
0 存活0秒
正数 存活。。。秒 - HttpOnly 有这个标记的cookie,前端无法获取
- Secure 设置cookie只能通过https传输。
- SameSite 设置cookie在跨域请求的时候不能被发送。
storage
console.dir(Storage)可以显示一个对象所有的属性和方法。
localstorage,sessionStorage都是继承Storage对象和方法。
- length 本地存储数据的数量
- key() 通过索引找到存储数据(鸡肋,被浏览器处理了之后就不是原来的顺序了)
- getItem() 通过键名取到本地存储的数据
- setItem() 设置一个本地存储数据
- removeItem() 删除一个本地存储数据
- clear() 清空本地存储数据
localstorage
存储5mb(5兆)
不能跨域
不会过期,需手动删除,除了手动删除还有无痕模式也会删除数据库
// 普通数据
localStorage.setItem('name', 'kaivon');
// 对象数据存储
var arr = ['red','green']
localStorage.setItem('color', JSON.stringify(color)); // 先转化为字符串
console.log(JSON.parse(localStorage.getItem('color'))); // 获取对象数据
sessionstorage
会话级,会话存储,页面关了之后就没了