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

浏览器存储localStorage、sessionStorage、cookie

猜你喜欢