1.cookie
cookie就是通过浏览器在同域下交互的数据。
在chrome中,查看cookie的方法:打开控制台,Resources -> cookies。
1.1 设置cookie
语法:
document.cookie = "123";
如果只设置value值,那么在设置的时候,后面会把前面的覆盖。
如果有多个相同的key值即设置了key也设置了value值,这个时候,后面会把前面的覆盖。
cookie一般用于在浏览器中缓存数据用。
1.2 cookie的限制
cookie的大小是有限制的,每个浏览器支持的都不一样,有的50条,有个20条..
默认的cookie的声明周期,当浏览器关闭之后,这个cookie的生命周期结束。这条cookie就会被删除。
设置cookie的生命周期
//新建一个data对象
var time = new Date();
//设置这个data对象,让他的时间为 当前日期 + N天
time.setData(time.getData() + N )
//设置cookie的生命周期
document.cookie = "key=value;expires="+time;
用上面的方式可以为这条cookie添加N天的生命周期
1.3 删除cookie
如果需要删除一条cookie,那么就设置他的生命周期比当前时间还小,那么就会被删除了。
var time = new Date();
time.setData(time.getData()-1);
document.cookie = "key=value;expires="+time;
1.4 获取cookie
cookie是即可读也可以写入的
var cookie = document.cookie;
在读取的时候,如果当前页面有多个cookie那么,是由;+空格链接的。
name=神童; 234; 小红=神童
如果需要分割,那么使用;
作为分割符进行分割。
2.localStorage
localstorag是HTML5的数据存储的新API,是一个没有时间限制的数据存储。在这之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
2.1 特点
localstorage大小一般限制在5MB左右,各个浏览器不同,以后或许还会增加
而cookie的大小只有4KB
浏览器支持情况:
理论上支持IE8以上和标准浏览器。
虽然这个API是html5新添加的,但是在IE的仿真功能中测试的时候,即使是IE5都可以使用。
在标准浏览器中,可以在本地查看localstorage
IE浏览器必须使用localhost查看
生命周期:
localstorage如果不删除就会一直存在
2.2 localstorage的操作
2.2.1 添加
window.localstorage.setItem(key,value);
参数:
key:key值
value:value值
其中,value不能放入对象,如果放入数组会使用,
将它链接字符串。
如果需要放入对象,需要使用JSON.stringify来转换成json格式在放入
2.2.2 获取
window.localstorage.getItem(key,value);
参数:
key:key值
获取到的value都是一个字符串。
如果需要使用json格式的内容,那么就使用JSON.parse把它转化为对象
2.2.3 删除
window.localstorage.removeItem(key)
删除一条名字为key的localstorage信息。
window.localstorage.clear();
删除所有的localstorage信息。
2.2.4 storage事件
window.addEventListener("storage",function(){
//执行的事件
})
当操作了本地存储的数据的时候,会触发storage
这个事件,这个事件不会在操作的页面上触发,只会在同浏览器的同源页面上触发(这两个页面都需要storage事件)。这相当与,可以在同浏览器的同源页面上监听当前页面的操作。
在storage
对象下,有一些可以直接使用的属性,例如:ldValue
,newValue
,key
等等
注意:
storage
对象只能在localhost环境下才能进行监听