浏览器存储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都是以纯文本的形式记录于文件中,因此要保存用户的敏感信息时最好先加密

posted @ 2018-06-01 12:09  雨筠  阅读(229)  评论(0编辑  收藏  举报