客户端存储的概念

web 应用允许使用浏览器提供的 API 将数据存储在客户端电脑上；

客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据；

在同一个站点的不同页面之间，存储的数据是共享的；

数据的存储有效期可以是临时的，比如在页面刷新之后，我们的所有数据都会被清空以及关闭浏览器数据就销毁； 也可以是永久的要用到本地存储技术，就可以在客户端电脑上存储任意时间；

在使用数据存储是需要考虑安全问题，比如银行卡账号密码

前端本地存储技术

把数据保存到磁盘中就是本地存储技术。本地存储的技术：大文件的离线存储（常见于大型游戏），本地数据库等。 前端存储数据的方式有四种：cookie、localStorage、sessionStorage 和 indexDB(存储容量大，可以存几百兆)。

1.cookie

存储 cookie 是浏览器提供的功能，cookie 其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的 cookie。 前端创建和获取 cookie 的方式

创建 cookie： document.cookie="";值是字符串，字符串是有格式的，由键值对 key=value 构成，键值对之间由一个分号和一个空格隔开。 获取 cookie：这个方法只能获取非 HttpOnly 类型的 cookie let myCookie = document.cookie;

章节配图

左边栏 Cookies 下方会列举当前网页中设置过 cookie 的域都有哪些。上图中只有一个域。而右侧区域显示的就是某个域下具体的 cookie 列表，对应上图就是该域下设置的 cookie。

当网页要发 http 请求时，浏览器会先检查是否有相应的 cookie，有则自动添加在 request header 中的 cookie 字段中。这些是浏览器自动帮我们做的，而且每一次 http 请求浏览器都会自动帮我们做，但是需要满足条件才会发送该域下的 cookie，首先本地已经缓存有 cookies 然后根据请求的 URL 来匹配 cookies 的 domain、path 属性，如果 domain、path 属性都符合才会发送。

cookie 的属性

每个 cookie 都有一定的属性，如什么时候失效，要发送到哪个域名，哪个路径等。这些属性是通过 cookie 选项来设置的，expires、domain、path、secure、HttpOnly。在设置任一个 cookie 时都可以设置相关的这些属性也可以不设置，这时会使用这些属性的默认值。在设置这些属性时，属性之间由一个分号和一个空格隔开。

"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

expires=Thu, 25 Feb 2016 04:18:00 GMT 表示 cookie 将在这个时间之后失效，对于失效的 cookie 浏览器会清空。如果没有设置该选项，则默认有效期为 session，即会话 cookie，这种 cookie 在浏览器关闭后就没有了。

domain 和 path，domain 是域名，path 是路径，两者加起来就构成了 URL，domain 和 path 一起来限制 cookie 能被哪些 URL 访问。domain 的默认值为设置该 cookie 的网页所在的域名，path 默认值为设置该 cookie 的网页所在的目录。

secure 选项用来设置 cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时，包含 secure 选项的 cookie 才能被发送至服务器。默认情况下，cookie 不会带 secure 选项(即为空)。所以默认情况下，不管是 HTTPS 协议还是 HTTP 协议的请求，cookie 都会被发送至服务端。但要注意一点，secure 选项只是限定了在安全情况下才可以传输给服务端，但并不代表你不能看到这个 cookie。如果想在客户端即网页中通过 js 去设置 secure 类型的 cookie，必须保证网页是 https 协议的。在 http 协议的网页中是无法设置 secure 类型 cookie 的。

httpOnly 选项用来设置 cookie 是否能通过 js 去访问。默认情况下，cookie 不会带 httpOnly 选项(即为空)，所以默认情况下，客户端是可以通过 js 代码去访问（包括读取、修改、删除等）这个 cookie 的。当 cookie 带 httpOnly 选项时，客户端则无法通过 js 代码去访问（包括读取、修改、删除等）这个 cookie。在客户端是不能通过 js 代码去设置一个 httpOnly 类型的 cookie 的，这种类型的 cookie 只能通过服务端来设置。

size 选项是 cookie 对象的值字符串的字符个数。

2.LocalStorage 和 SessionStorage

1. LocalStorage 和 SessionStorage 是 window 的两个属性，都代表同一个 Storage 对象；
2. localStorage 和 sessionStorage 的 API：
   • setItem(string key, value)：将对应的键值对的 key 和 value 传递进去，可以实现数据存储；
   • getItem(string key)：将键传递进去，可以获取对应的值；
   • removeItem(sring key)：将键传递进去，可以删除对应的值；
   • clear()：删除所有的缓存值，不需要参数；
   • length：属性，获取键值对总数；
   • key()：传入位置数，获取存储的值的键；

sessionStorage.setItem('name', 'jzx');
sessionStorage.setItem('age', 26);
let name = sessionStorage.getItem('name');
let age = sessionStorage.getItem('age');
console.log(name, age);

localStorage.setItem('username', 'hyomin');
localStorage.setItem('age', 18);
let username = localStorage.getItem('username');
let age = localStorage.getItem('age');
console.log(username, age);

LocalStorage

• LocalStorage：永久性保存
• window.localStorage.setItem(string key, value); //保存
• window.localStorage.getItem(string key);//获取
• window.localStorage.clear();//清空
• window.localStorage.removeItem(sring key)//根据键得到值
• window.localStorage.length ：返回一个整数，表示存储在 LocalStorage 对象中的数据项(键值对)数量。
• window.localStorage.key(int index) ：返回当前 LocalStorage 对象的第 index 序号的 key 名称。若没有返 null。

SessionStorage

• SessionStorage:关闭浏览器数据就自动全部删除
• window.sessionStorage.length ：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。
• window.sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第 index 序号的 key 名称。若没有返 null。
• window.sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回 null。
• window.sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
• window.sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
• window.sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

localStorage 和 sessionStorage 区别

localStorage 和 sessionStorage 存储数据的有效期和作用域不同：

（1）localStorage

​localStorage 存储的数据是永久的，当然用户可以清除这些缓存数据的； 比如清除历史记录就可以清除这些数据； ​localStorage 的作用域限制在文档源； 文档源由协议、域名、端口三者来确定；下面的 URL 就拥有不同的文档源：

​www.xxxx.com //协议 http，域名 www.xxxx.com
​www.xxxx.com //协议 https，和上面不同
​www.figfting.com.cn/ //和上面域名不同
​www.figfting.com.cn:81/ //和上面端口不同，默认端口是 80

​ 这种情况下，localStorage 存储的数据是不能相互访问的； 即便他们来自同一台服务器； ​localStorage 同源的文档之间可以相互访问和修改相同名称的数据； ​localStorage 受浏览器厂商的限制，chrome 下存储的数据，360 浏览器下不可访问； 会得到‘Invalid Date’；

（2）sessionStorage

​sessionStorage 存储的数据在窗口或标签关闭时，数据就会丢失； 在一个标签前进后退时数据不会丢失，这样我们就可以获取上次访问时产生的相关信息； 随着现代浏览器越来越强大，具体的声明周期还和浏览器功能有关；

​sessionStorage 在 localStorage 的同源策略基础上，有更严格的限制： ​ 他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享 sessionStorage； ​ 但是不同的窗口或标签页之间不能共享 sessionStorage，即便他们是同一个页面地址； ​ 窗口是指顶级窗口，如果是多个 iframe，他们之间共享 sessionStorage；

localStorage、sessionStorage、cookie 三者的区别

（1）存储大小

​cookie 数据大小不能超过 4k ； ​sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大；

（2）有效时间

​localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； ​sessionStorage 数据在当前浏览器窗口关闭后自动删除； ​cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭；

（3）数据与服务器之间的交互方式

​cookie 的数据会自动的传递到服务器，服务器端也可以写 cookie 到客户端； ​sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存；

（4）作用域

​localStorage 的作用域限制在文档源的； ​localStorage 同源的文档之间可以相互访问和修改相同名称的数据； ​localStorage 受浏览器厂商的限制，chrome 下存储的数据，360 浏览器下不可访问； 会得到‘Invalid Date’； ​sessionStorage 在 localStorage 的同源策略基础之上，还有更严格的限制： ​ 它还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享 sessionStorage； ​ 但是不同的窗口或标签页之间不能共享 sessionStorage，即便他们是同一个页面地址； ​ 这里的窗口是顶级窗口，如果里面有多个 iframe，他们之间共享 sessionStorage；

前端储存技术 (opens new window)