JavaScript学习教程之cookie与webstorage

由于http是无状态的协议，一旦客户端和服务器的数据交换完毕，就会断开连接，再次请求，会重新连接，服务器单从网络连接上是没有办法知道用户身份的。cookie就是为了解决此问题而产生的，每次新的用户请求时，便给用户颁发一个独一无二的身份证，下次访问，必须带上身份证，这样服务器就会知道是哪个用户进行了访问，针对不同用户，做出不同的响应cookie是一个很小的纯文本文件（最多为4K），是浏览器储存在用户的机器上的。储存一些服务器需要的信息，每次请求站点，会发送相应的cookie，这些cookie可以用来辨别用户身份信息等作用。

cookie的属性字段

props intro
name   cookie的名称  
value   cookie的值  
domain   可以访问cookie的域名  
path   可以访问此cookie的页面路径  
expires/Max-Age   cookie有效的时间  
Size   cookie的大小  
httpOnly   js能否读取到cookie信息  
secure   是否只能通过https来传递此条cookie  

cookie是以纯文本的方式存储，即cookie的数据类型为String类型

document.cookie = 'name=userInfo'; // 设置cookie的name属性 document.cookie = 'username=Jack'; // 在cookie中存储了username信息 console.log(document.cookie); // name=userInfo; username=Jack

document.cookie = 'name=userInfo'; // 设置cookie的name属性 document.cookie = 'username=Amy'; // 在cookie中存储了username信息 console.log(document.cookie); // name=userInfo; username=Amy

通过上面的实例可以知道，给cookie赋值时是不会覆盖cookie的原有的值，当等号前的属性名相同时，才会将原来相同属性名的值覆盖为后来设置的值。注意，cookie的两个字段之间是通过一个分号和空格分隔，而不是只有一个分号

当要给cookie设置非自定义的属性字段时，需要通过字符串追加的方式

例如

let expireDate = new Date(); document.cookie += ";expires=" + expireDate.toString();

注意： ";expires="中的分号必须有，如果字段前不加分号则会认为这是一个自定义字段

domain

非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。

顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。

顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

总的来说就是，上级域名不能访问下级域名的cookie，下级域名可以读取自身及上级域名的cookie，同级域名的cookie不共享，即同级域名之间不能互相访问对方的cookie，只能访问自身的cookie。

path

path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age

expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置此字段时，默认值是Session，即当浏览器关闭(注意：不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

let expireDate = new Date("2019-5-26T09:00:00"); document.cookie += ";expires=" + expireDate.toString();

若要删除某条cookie则设置此条cookie的expires为当前时间之前的时间的即可

let expireDate = new Date("1970-01-01T00:00:00"); document.cookie += ";expires=" + expireDate.toString();

size

Size字段 此cookie大小。

httpOnly

若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie，设置为true可以减少受到Xss攻击的风险

secure

secure 字段 设置是否只能通过https来传递此条cookie

localstorage/sessionstorage