JS的cookie与sessionStorage和localStorage

cookie

基于http协议的一种本地'存储'技术 (它就相当于钱包)

document.cookie="username=itzan; expires=有效时间 GMT; path=/";domain=;secure;

它的特点:

1.基于http协议 2.它会随着请求携带到服务器 3.只能存储4k左右 4.能跨域(设置domain),默认不可以 5.容易被伪造,不安全,会造成 xss攻击 (站点伪造)

它的使用场景:

1.免登录 2.购物车 3.简单的存储,非铭感数据

http协议

常见于 浏览器与服务器的通信,它是属于 应用层 (应用程序) http 默认的端口是80 http协议的特点 短连接(断开式) 浏览器向服务器发送请求,服务器接受,并响应 无状态 不知道是谁访问了服务器,

1. 用(cookie+session)解决

2. token 凭证

cookie 、sessionStorage与localStorage的区别

特性		sessionStorage	localStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	仅在当前会话下有效，关闭页面或浏览器后被清除	除非被清除，否则永久保存
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

WebStorage(sessionStorage与localStorage)提供了一些方法，数据操作比cookie方便；

1).setItem (key, value) —— 保存数据，以键值对的方式储存信息。 2).getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。 3).removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 4).clear () —— 删除所有的数据 5).key (index) —— 获取某个索引的key

//本地缓存

        //setItem 设置元素 key value

        //getItem 获取元素 通过key 来获取value

        //removeItem 移除元素根据key删除

        localStorage.setItem('username','jack')

        localStorage.getItem('username')

        //localStorage.removeItem('username')

        console.log( localStorage.getItem('username'));

   

        sessionStorage.setItem('password','123')

        sessionStorage.getItem('password')

        //sessionStorage.removeItem('password')

        //localStorage和cookie的区别

        //localStorage储存大小为5MB cookie只有4kb

        //cookie 会随着请求发送

        //cookie可以跨域 localStorage不行

        //cookie 能跨域(设置domain)

        //两者存储的位置不同

        //共同点

            //都只能储存字符串

            //都是位于浏览器上面