浏览器存储localStorage、sessionStorage、cookie
localStorage和sessionStorage浏览器支持IE8+(测试IE8不行);
localStorage:用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
sessionStorage:用于临时保存同一窗口(或标签的数据),在关闭窗口或标签页之后将会删除这些数据
localStorage和sessionStorage可使用的API都是相同的:
1、保存数据:localStorage.setItem(key,value);
localStorage.setItem("clickcount","1");
localStorage.clickcount = Number(localStorage.clickcount)+1;//将字符串转换为数字
2、读取数据:localStorage.getItem(key);
alert(localStorage.getItem("clickcount"))
3、删除单个数据:localStorage.removeItem(key);
4、删除所有数据:localStorage.clear();
5、得到某个索引的key:localStorage.key(index);
键/值对通常以字符串存储,可以按需求转换格式
cookie
创建cookie:document.cookie = "userId = 12138";
在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方 法是用 escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此 种方案还可以避免中文乱码的出现。例如:
document.cookie="str="+escape("I love ajax");
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值
设置cookie的过期时间(以 UTC 或 GMT 时间):document.cookie = "userId = 12138; expires=Thu, 18 Dec 2013 12:00:00 GMT";
读取cookie:var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
修改cookie:document.cookie = "userId = 18; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
删除coolie,只需要设置expires为以前的时间即可:document.cookie = "userId = 12138; expires=Thu, 18 Dec 2013 12:00:00 GMT";
cookie是存于用户硬盘的一个文件,这个文件通常对应一个域名,当浏览器再次访问这个域名时,便使这个cookie可用,因此,cookie可用跨越一个域名下的多个网页,不能跨域名使用
cookie可以保存用户的登录状态、跟踪用户的行为(网页城市的切换)、定制页面(网页皮肤切换)、创建购物车
cookie的确定主要集中在安全性和隐私保护
1、cookie可能被用户禁用
2、cookie和浏览器相关,使用不同的浏览器访问同一个页面,不同浏览器保存的cookie不能互相访问
3、cookie可能被删除,因为cookie是存储在用户硬盘的一个文件,很有可能被用户删除
4、cookie都是以纯文本的形式记录于文件中,因此要保存用户的敏感信息时最好先加密