本地存储 cookie&&storage

2017-08-11 本文已影响36人一刀一个小黄鱼

本地存储

数据在客户端（浏览器）保存的方案

cookie

客户端存储数据的一种方式，该数据会随着请求一起发送给服务端

是按照域和path来分别进行存储的，当前域和当前路径只能操作当前域/路径或其子域/子路径下的cookie,

一个域下可以设置多个cookie，每个cookie可以包含：key,value,expires/max-age,path,domain等属性,

一个域下的cookie个数是有限制的，不同浏览器不同版本限制的个数不一样，大概几十个,

一个cookie中保存的内容也是有大小限制的，不同浏览器不同版本限制的大小不一样，大概4000-8000个字符之间.

我们可以通过头信息来传输cookie数据

请求：浏览器发送一个请求的时候，会主动的把和该请求同源下cookie通过请求头一起发送给服务端

响应：服务器也可以通过响应头，把cookie数据发送给客户端，如果客户端是浏览器，那么浏览器会主动的读取到响应头中的cookie数据，并保存在浏览器本地

我们还可以通过js来操作cookie数据，需要注意的是，如果cookie是httpOnly的话，那么这个cookie将不能被js操作，他只能用户请求和响应**

在document对象下有一个属性：cookie，该属性是可读写属性

如果我们想通过js设置一个cookie，那么就可以通过document.cookie来进行设置,

document.cookie = 'value'

同一个源下可以存储多个不同值的cookie，所以我们一般情况下会给每一个cookie起一个名字加以区分

document.cookie = "key = value"

cookie的选项

name: cookie名称
value: cookie的值
domain：cookie所在的源（域）,这个选项的设置需要注意一些问题，只能设置该域或该域的子域，假设该脚本在baidu.com下的某个页面中执行，那么domain只能设置如下：domain=baidu.com或者domain=vip.baidu.com或者a.b.baidu.com,在读取的时候，只能获取到脚本所在域和其子域下的例如

baike.baidu.com/a.html在这个页面中我们通过去获取cookie，只能获取到baike.baidu.com以及他的子域下的cookie
path：路径，该选项和domain类似，也是用来设置某个cookie的存储范围，但是他是使用path来设置，假设现在的域是baidu.com，那么如果path=/，就表示在baidu.com的所有路径都可以访问该cookie，如果path=/a，那么这个是baidu.com/a/ 下的页面也能够操作这个cookie，所以总的来说，cookie是按照域和路径来分开存储的
expires: 过期时间，cookie默认是临时性存储的，他的默认存储时间是：会话结束，关闭浏览器，自动清除expires时间为session的cookie，我们可以通过expires来设置一个cookie的过期（到期）时间，他的值一个日期格式的字符串，该方式并不推荐使用，推荐使用 max-age：生命周期时间，存储的时间（保质期），单位：秒

//expires
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'username=aaa;expires=' + d.toGMTString();
//10天后到期清除cookie

//max-age
document.cookie = 'username=bbb;max-age=120';
//120秒后清除

读取

document.cookie返回的是一个字符串，key=value的形式，多个cookie使用一个分号加空格来连接

document.cookie = 'uesername=aaa';
document.cookie = 'age=18';
console.log(document.cookie);
//本地浏览器有限制，需要在服务器里运行才能查看

删除

document.cookie = 'age=28;max-age=-1';

把生存时间变为0或者-1

storage

storage是H5新增的一个客户端数据存储方案，为了解决cookie会自动传输的问题，storage分为两种：localStorage / sessionStorage

localStorage && sessionStorage 基本使用相同，适用同源策略

在window对象下有localStorage ，sessionStorage 其中两个子对象，它们提供了

setItem(key,value)

将对应的键值对存入到指定的Storage(localStorage或者sessionStorage)。如果已经存在相同的key，则value会覆盖原来的值

getItem(key)

拿到给定的key返回对应的值的一种方式。

localStorage.setItem('name', 'motao'); //设置
localStorage.getItem('name') //获取

removeItem(key)

移除key对应的键值对。如果没有key，则不执行任何操作。

clear()

当你不需要缓存或者需要将所有的缓存键值对重新设置时，调用对用的Storage对象。如：localStorage.clear()可以清楚本地缓存中的所有键值对儿。如果Storage对象本来就是空的，那么他不执行任何操作。

localStorage && sessionStorage区别

localStorage：永久保存（除了主动删除）；同源下的所有页面都可以共享该数据；支持一个事件：storage，他是一个广播类型事件

sessionStorage:会话结束自动删除;只有当前页面才可以使用该数据

storage事件

当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发

假如我们有a,b 两个界面，

网页A：监听了storage事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>A</title>
</head>
<body>
<script>
    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });
</script>
</body>
</html>

网页B：修改了localStorage

<!DOCTYPE html>
<html>
<head lang="en">
    <title>B</title>
</head>
<body>
<script>
    localStorage.clear();
    localStorage.setItem('foo', 'bar');
</script>
</body>
</html>

运行：将上面两个网页保存，放到同一个服务器上，然后，先打开A.html，再打开B.html。就会看到A.html会弹出提示框。注意两个网页要同源。

这样就可以用storage做出不用请求http就可以传递数据的项目，例如，购物车，当用户打开一个新页面进行购物车添加，就可以直接传递到最开始打开的页面里的购物车数字增长，

qq音乐的跨页面，添加歌曲到歌单，就是用到了storage事件