浏览器相关

浏览器存储

浏览器给前端开发人提供了存储数据。
作用：实现数据持久化存储。可以实现数据的共享

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数据。主流