浏览器存储
浏览器给前端开发人提供了存储数据。
作用:实现数据持久化存储。可以实现数据的共享
url传参
- location.href 跳转链接并拼接下一个页面需要的参数
- 在两一个页面中location.href获取页面信息,并对
?
后面参数进行格式化处理 - 最后使用格式化后的参数。
数据持久化存储locaStorage
为什么需要locaStorage
只要浏览器中数据需要持久化存储都可以使用localStorage
- 1:大小5M
- 2: 需要使用ap才能删除数据 removeItem clear
- 3:应用
- 存储登录成功后,接口返回的数据。用该数据判断是否登录
- 页面中不需要频繁更新的数据,可以存在locaStorage中。用于较少http请求次数提高性能
- 例如:首页第一次获取商品列表数据,
- 例如:记住密码
- 例如:存储浏览器记录等
api
- localStorage.getItem()
- localStorage.setItem()
- localStorage.removeItem()
- localStorage.clear()
临时存储 sessionStorage
只要是关闭浏览器之前,需要持久存储数据。
- 5M
- 浏览器关闭自动删除数据
- 应用:与locaStorage差不多
api
- sessionStorage.getItem()
- sessionStorage.setItem()
- sessionStorage.removeItem()
- sessionStorage.clear()
cookies
cookies 只是为了用户信息存在的,不存储浏览器中其他数据
- 4kb
- 存储用户登录信息(一般是服务端自动存储的)
数据持久化存储 indexDB
为什么需要indexDB
因为locaStorage 不满足所有数据存储。如果数据量超过5M locaStorage 不能解决
- indexDB 数据库;可以创建数据库
- 一个数据库下游多个表
- 一个表中有很多字段
- 一个表中可以存储很多数据
indexDB是什么?
浏览器数据库:异步存储的数据。存在操作indexDB的事件监听
indexDB解决了什么问题?
普通的列表可以使用locaStorage解决。如果 3d效果,大量数据 5M太小了
例如:three.js D3.js 画的一个模型;有的是 几十兆 几十兆的数据对于一般的服务器来说加载速度特别慢,为了解决加载速度慢问题。我们通过本地存储解决
- 大小超过240M
浏览器中数据源头
- 1:静态的。自己本地创建数组
- 2:服务端返回的 json数据。主流