一、前言
在前端开发中，浏览器有三种本地存储方式
- cookie 本地小数据存储，一般在 4KB 以内
- localStorage 本地同源存储 长期存储 同源共享 5MB以内
- sessionStorage 会话级存储 临时存储 只维护当前页面数据 5MB以内
二、cookie
存储小数据，一般在 4KB 以内 一般用来存储登录会话信息
localStorage 和 sessionStorage 解决 cookie 存储空间不足的问题 5MB
三、localStorage
首先 local 意为本地，storage 意为存储，字面理解，将数据进行本地存储
- 拓展了 cookie 的 4K 限制
- 永久性的存储到浏览器中，保存的数据没有过期时间，直到手动去删除
- 刷新当前页面/关闭浏览器重新打开, 存储的数据仍在
- 遵循同源策略，所以不同的网站是不公用相同的
localStorage, 各自维护各自的localStorage - 本质上是对字符串的读取, 如果存储内容多的话会消耗内存空间, 导致页面卡顿, 一般情况下是存储的数据在 5MB 以内
- 一般会将 JSON 存入到 localStorage，在存储之前先使用
JSON.stringfy()来将其转为 JSON 字符串, 读取之后通过JSON.parse()来解析 - localStorage.setItem(键, 值) // 存储;
- localStorage.getItem(键) // 读取;
- localStorage.removeItem(键) // 删除;
- localStorage.clear() // 清除源的所有 localStorage
- 不能够被爬虫爬取, 所以不能替代 URL 传参
四、sessionStorage
同样, session 意为会话，字面意思，将本次会话的数据存储到本地
- 存储当前标签页面会话的数据，在浏览器中，即使是同一个地址，不同的标签，sessionStorage 存储的数据也是不共享的，各自维护
- 刷新当前页面，存储的数据仍在
- 关闭当前页面，存储的数据就不存在了，再次打开该页面，原 sessionStorage 就不存在了
- sessionStorage.setItem(键, 值) // 存储;
- sessionStorage.getItem(键) // 读取;
- sessionStorage.removeItem(键) // 删除;
- sessionStorage.clear() // 清除该页面的所有 sessionStorage
若想设置 localStorage/sessionStoarge 过期时间，可自行根据本身的API封装以实现预期效果。
五、同源策略
访问 Web 页面，例如 http://store.company.com/dir/page.html
对于该地址，涉及协议 http，域名 store.company.com
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
https://store.company.com/secure.html | 失败 | 协议不同 |
http://store.company.com:81/dir/etc.html | 失败 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html | 失败 | 主机不同 |
- 协议相同
- 域名相同
- 端口相同
只要不满足上述三个条件之一，就不是同源，而是 跨域 。
