javascript之cookie, localstorage, sessionstorge

cookie

因为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

webstorage并非要替代cookie，而是为了弥补随着web的发展，cookie在存储限制（存储容量最多为4k），安全性（在http协议中明文传输）存在的缺点而提出的

二者的API是相同的

function	intro
setItem(key, value)	以键值对的形式保存一条数据
getItem(key)	根据键来得到值
removeItem(key)	根据键来删除一条数据
key(index)	根据索引得到键的名称
clear()	删除所有数据

二者都有length属性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name'));  // Jack
console.log(sessionStorage.key(0));  // name
console.log(sessionStorage.length);  // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length);  // 1
sessionStorage.clear();              
console.log(sessionStorage.length);  // 0
复制代码

二者的比较

• localStorage和sessionStorage都是用来存储客户端临时信息的对象。均只能存储字符串类型的对象，虽然规范中能够存储其余原生类型的对象，可是目前为止没有浏览器对其进行实现。
• localStorage生命周期是永久，除非用户显示在浏览器提供的UI上清除localStorage信息，不然这些信息将永远存在。
• sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，sessionStorage存储的数据就被清空了。
• 不一样浏览器没法共享localStorage或sessionStorage中的信息。
• 相同浏览器的不一样页面（页面属于相同域名和端口）间能够共享相同的localStorage
• 不一样页面或标签页间没法共享sessionStorage的信息。注意，页面及标签页仅指顶级窗口，若是一个标签页包含多个iframe标签且属于同源页面，那么他们之间是能够共享sessionStorage的。
• 使用window.open打开页面和改变localtion.href方式均可以获取到sessionStorage内部的数据

cookie 与 webstorage的区别

• 存储限制
  • 每一个domain中只能存储最多20条cookie，cookie数据不能超过4K
  • webStorage也有存储大小的限制，可是比cookie大得多，能够达到5M或更大
• 数据的有效期
  • sessionStorage：仅在当前的浏览器窗口关闭有效；
  • localStorage：始终有效，除非用户手动删除
  • cookie：cookie过时时间以前一直有效，即便窗口和浏览器关闭
• 做用域
  • sessionStorage：不在不一样的浏览器窗口中共享，即便是同一个页面；
  • localStorage：同源窗口共享
  • cookie：同源窗口共享