本篇内容主要讲解“JavaScript的cookie与webstora是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的cookie与webstora是什么”吧!
创新互联是一家专注于成都网站设计、成都网站制作与策划设计,罗湖网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:罗湖等地区。罗湖做网站价格咨询:18980820575cookie
由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,服务器单从网络连接上是没有办法知道用户身份的。cookie就是为了解决此问题而产生的,每次新的用户请求时,便给用户颁发一个独一无二的身份证,下次访问,必须带上身份证,这样服务器就会知道是哪个用户进行了访问,针对不同用户,做出不同的响应cookie是一个很小的纯文本文件(最多为4K),是浏览器储存在用户的机器上的。储存一些服务器需要的信息,每次请求站点,会发送相应的cookie,这些cookie可以用来辨别用户身份信息等作用。
cookie的属性字段
通过上面的实例可以知道,给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:同源窗口共享
到此,相信大家对“JavaScript的cookie与webstora是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!