本地存储
数据在客户端(浏览器)保存的方案
cookie
客户端存储数据的一种方式,该数据会随着请求一起发送给服务端
是按照域和path来分别进行存储的,当前域和当前路径只能操作当前域/路径或其子域/子路径下的cookie,
一个域下可以设置多个cookie,每个cookie可以包含:key,value,expires/max-age,path,domain等属性,
一个域下的cookie个数是有限制的,不同浏览器不同版本限制的个数不一样,大概几十个,
一个cookie中保存的内容也是有大小限制的,不同浏览器不同版本限制的大小不一样,大概4000-8000个字符之间.
我们可以通过头信息来传输cookie数据
请求:浏览器发送一个请求的时候,会主动的把和该请求同源下cookie通过请求头一起发送给服务端
响应:服务器也可以通过响应头,把cookie数据发送给客户端,如果客户端是浏览器,那么浏览器会主动的读取到响应头中的cookie数据,并保存在浏览器本地
我们还可以通过js来操作cookie数据,需要注意的是,如果cookie是httpOnly的话,那么这个cookie将不能被js操作,他只能用户请求和响应**
在document对象下有一个属性:cookie,该属性是可读写属性
如果我们想通过js设置一个cookie,那么就可以通过document.cookie来进行设置,
document.cookie = 'value'
同一个源下可以存储多个不同值的cookie,所以我们一般情况下会给每一个cookie起一个名字加以区分
document.cookie = "key = value"
cookie的选项
name: cookie名称
value: cookie的值
-
domain:cookie所在的源(域),这个选项的设置需要注意一些问题,只能设置该域或该域的子域,假设该脚本在baidu.com下的某个页面中执行,那么domain只能设置如下:domain=baidu.com或者domain=vip.baidu.com或者a.b.baidu.com,在读取的时候,只能获取到脚本所在域和其子域下的例如
baike.baidu.com/a.html在这个页面中我们通过去获取cookie,只能获取到baike.baidu.com以及他的子域下的cookie
path:路径,该选项和domain类似,也是用来设置某个cookie的存储范围,但是他是使用path来设置,假设现在的域是baidu.com,那么如果path=/,就表示在baidu.com的所有路径都可以访问该cookie,如果path=/a,那么这个是baidu.com/a/ 下的页面也能够操作这个cookie,所以总的来说,cookie是按照域和路径来分开存储的
expires: 过期时间,cookie默认是临时性存储的,他的默认存储时间是:会话结束,关闭浏览器,自动清除expires时间为session的cookie,我们可以通过expires来设置一个cookie的过期(到期)时间,他的值一个日期格式的字符串,该方式并不推荐使用,推荐使用 max-age:生命周期时间,存储的时间(保质期),单位:秒
//expires
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'username=aaa;expires=' + d.toGMTString();
//10天后到期清除cookie
//max-age
document.cookie = 'username=bbb;max-age=120';
//120秒后清除
读取
document.cookie返回的是一个字符串,key=value的形式,多个cookie使用一个分号加空格来连接
document.cookie = 'uesername=aaa';
document.cookie = 'age=18';
console.log(document.cookie);
//本地浏览器有限制,需要在服务器里运行才能查看
删除
document.cookie = 'age=28;max-age=-1';
把生存时间变为0或者-1
storage
storage是H5新增的一个客户端数据存储方案,为了解决cookie会自动传输的问题,storage分为两种:localStorage / sessionStorage
localStorage && sessionStorage 基本使用相同,适用同源策略
在window对象下有localStorage ,sessionStorage 其中两个子对象,它们提供了
setItem(key,value)
将对应的键值对存入到指定的Storage(localStorage或者sessionStorage)。如果已经存在相同的key,则value会覆盖原来的值
getItem(key)
拿到给定的key返回对应的值的一种方式。
localStorage.setItem('name', 'motao'); //设置
localStorage.getItem('name') //获取
removeItem(key)
移除key对应的键值对。如果没有key,则不执行任何操作。
clear()
当你不需要缓存或者需要将所有的缓存键值对重新设置时,调用对用的Storage对象。如:localStorage.clear()可以清楚本地缓存中的所有键值对儿。如果Storage对象本来就是空的,那么他不执行任何操作。
localStorage && sessionStorage区别
localStorage:永久保存(除了主动删除);同源下的所有页面都可以共享该数据;支持一个事件:storage,他是一个广播类型事件
sessionStorage:会话结束自动删除;只有当前页面才可以使用该数据
storage事件
当同源页面的某个页面修改了
localStorage
,其余的同源页面只要注册了storage事件,就会触发
假如我们有a,b 两个界面,
网页A:监听了storage
事件:
A
网页B:修改了localStorage
B
运行 : 将上面两个网页保存,放到同一个服务器上,然后,先打开A.html,再打开B.html。就会看到A.html会弹出提示框。注意两个网页要同源。
这样就可以用storage做出不用请求http就可以传递数据的项目,例如,购物车,当用户打开一个新页面进行购物车添加,就可以直接传递到最开始打开的页面里的购物车数字增长,
qq音乐的跨页面,添加歌曲到歌单,就是用到了storage事件