浏览器缓存cookie和storage
1.cookie在没有域名的情况下,能存进去么?
场景:在本地存cookie进去,document.cookie='name=1';发现直接打开此页面竟然没有没有存入到cookie中,然后换成webstorm打开(run起来),发现是存进去了的,总结,在没有域名的时候cookie是存不进去的
2.在sessionStorage和localStorage没有某个key值的时候?(sessionStorage和localStorage结果相同)
场景:当sessionStorage中无username这个key值的时候,使用sessionStorage.getItem('username')得到的结果是null,而使用sessionStorage.username和sessionStorage['username']得到的值是undefined;
3.关于storage事件?
网上看到一句这样的话,很有道理,如下:storage事件是指在同源策略下的两个页面,一个页面触发了localStorage中的值改变了,就会触发另一个页面的storage事件
注意:
1.首先得有两个页面,一个页面改变localStorage的值,另一个绑定storage的事件;
2.绑定storage事件的方法是window.addEventListener('storage',fun,false);
3.sessionStorage是没有这个事件的噢~(因为sessionStorage适用于顶层窗口,更换tab页都拿不到值)
storage事件有以下几个属性:
key:被修改或者被移出项的key,如果是使用clear()来清除,则为null
oldValue:改变或者删除前的value值,如果是插入的新项,则为null(clear的时候也为null)
newValue:改变或者删除后的value值,如果是removeItem(),则为null
storageArea:这个属性就好比window对象上的sessionStorage对象或者localStorage对象
url:触发该变化的文档的url
4.在看书的接触到一句话,存入sessionStorage中的属性的值必须是string?
经过验证表明,6大类型存入sessionStorage中的值,表现的和转换成toString差不多,除了null和undefined之外,null和undefined不能toString会报错,但是存入是可以的,会转换成为'null'和'undefined',这里提一嘴,之前看到有人用***.toString返回的是function,因为toString是对象的原型当中的一个方法
5.关于Date.parse的使用?
Date.parse(参数),参数为日期格式的string,返回值是1970,01,01到参数的毫秒数
6.关于sessionStorage和localStorage的有效期和作用域?
sessionStorage:sessionStorage的顶级窗口关闭,即sessionStorage会消失,同源的可以取到sessionStorage的值,即如果一个页面的tab页并没有关闭,将同源的链接拷贝到这个tab页面,是可以拿到这个tab页面的sessionStorage的值,注意,如果在一个tab页面加载了一个同源的页面,另一个tab页面也加载了一个同源的页面,这两个tab页面的sessionStorage是不能共享的
localStorage:localStorage的有效期是永久的,除非用户删除这个localStorage的值,localStorage遵循同源(同协议,同主机名,同端口)和同浏览器的原则,如:在不同的浏览器存的localStorage的值是不能相互取到的,在同一浏览器的不同tab页面之间localStorage的值是可以相互取到的(注意都是同源的情况下)
注意:在一个页面中,如果有两个iframe,如果这两个iframe同源,则这两个iframe是可以共用sessionStorage和localStorage的
7.sessionStorage和localStorage拥有的一些方法?(二者一样)
存储数据:sessionStorage.setItem('key','value')/sessionStorage.key = value/sessionStorage[key]=value
取值:sessionStorage.getItem('key')/sessionStorage.key/sessionStorage[key]
删除单个值:sessionStorage.removeItem('key')/delete sessionStorage.key(注意ie8不兼容)
清除所有:sessionStorage.clear()
8.关于sessionStorage和cookie的存储量的区别?
看到网上有这样的说法:sessionStorage和localStorage的存储量是5M,而cookie中的存储量是4KB(浏览器中允许存储的cookie是不超过300个(是标准,但是很多浏览器都超过了300个),每个不超过4kb,)
9.关于cookie的作用域和有效期?
其实cookie和sessionStorage和localStorage都有点像,比如说:
cookie在没有设置时间的时候,也是浏览器关闭cookie就会消失,但是是浏览器关闭才会消失,并不是tab页关闭会消失(注意刷新浏览器cookie是不会消失的)
所以:cookie和sessionStorage的相同点是会消失(哈哈),cookie是关闭浏览器消失,sessionStorage是关闭tab页消失
cookie和localStorage的相同点是不同的tab页面是可以共享这个cookie值的
cookie的作用域和domain和path有关,在不设置这两个值的时候,默认的domain是当前的域名(如www.baidu.com),默认的path就是当前的目录(如http://localhost:63342/lianxi/canvas/%E5%85%B3%E4%BA%8Edocument.html就是/lianxi/canvas)
path有个原则,即cookie只能共享到这个兄弟目录和子目录下
domain就是只能在这个站内使用
关于设置path,如果希望这个cookie在整个站内可以使用,将path设置成path=/即可,还可以设置成别的,但是都是遵循path的原则的,注意path是可以不设置成当前页面相关的目录的(在设置path的路径为中文的时候,发现存不进去)
关于设置domain,如果希望这个域名下的其它主机名是可以使用的,是可以设置成domain=.example.com(注意在设置domain的时候是设置成当前域的)这样,o.example.com和l.example.com都可以取到这个cookie;
设置cookie的key,value值的方法,如document.cookie = "username=yangying";这样可以将username存入到cookie中去,也可以存入多个值,存储的方式可以为document.cookie="username=yangying&age=1",也可以取别的分隔符,存入的值是yangying&age=1,建议不要这样存储,可以一个一个存储,
注意,如果名字不同是不同的cookie的,path不同也是两个不同的cookie,domain不同也是不同的cookie;
注意,一般cookie的值都应该编码一些存储
关于secure,默认是不安全的,一旦设置了secure即为安全的,不安全的有http传递及其他,安全的是https及其它
关于有效期,默认不设置的话,是浏览器关闭即消失,设置的话有两个属性expires和max-age,二者是一个意思,现在max-age渐渐替换了expires,关于二者的使用方法,max-age的单位是秒,直接设置max-age=10即为过10秒过期,expires是设置未来过期的时间是多少(如Wed, 19 Jul 2017 09:39:18 GMT),即到了这个时间的时候就会过期,注意设置的时间是Date的string格式,可以采用toGTMString来将Date对象转换
注意每一个值要用;(分号)隔开,如document.cookie="key=value;max-age=;path=;domain=***;secure";
注意如果设置了max-age的时候,即使不关闭浏览器,只要到了这个时间cookie也会删掉
在练习的时候接触到setTime(参数)方法,有几个误区,下面讲解一下,首先这个方法会返回setTime里面的参数,该方法是将date对象设置成某个时间点,接受的参数是相当于1970,01,01的毫秒数,
console.log(new Date().setTime(new Date().getTime()+5000))=>返回当前时间多5000毫秒的毫秒数
var a = new Date();
a.setTime(new Date().getTime()+5000);
console.log(a);=>将a设置成了当前时间多5000毫秒的Date对象,如(Wed Jul 19 2017 17:51:45 GMT+0800 (中国标准时间))
10.如何存储cookie和删除cookie?
存储cookie:document.cookie="key=value";
删除cookie:将cookie的有效时间设置为0,即max-age = 0;
11.如何取得cookie值?
cookie的取值和cookie的存值比较类似,但是cookie的取值只能取出key和value值,取出来后,将其转换成一个数组,并循环数组存入对象中
以上都是个人理解如有不对之处还望指正交流!