logo头像

求知若渴,虚心若愚

浏览器 - 浏览器基本组成(二)

网络模块( Networking )

介绍

  • 用来完成网络调用

功能介绍

  • 用来发送网络请求
  • 比如我们的ajax和xhr请求

UI 后端( UI Backend )

  • 用来绘制类似组合选择框及对话框等基本组件
  • 具有不特定于某个平台的通用接口
  • 底层使用操作系统的用户接口

JS解释器( JavaScript Interpreter )

数据存储( Data Persistence )

介绍

  • 用于数据持久化
  • 浏览器需要在本地硬盘中保存类似cookie的各种数据

功能介绍

  • HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术
  • 我们常用的缓存就是:Cookie以及HTML5中的本地存储 LocalStorage、SessionStorage)

常见数据存储方式

  • cookie数据始终在同源的http请求中携带(即使不需要)
  • cookie在浏览器和服务器间来回传递
  • 大小不超过4k
  • cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下
  • cookie也是在所有同源窗口中都是共享的

LocalStorage

  • 保存数据最大可以达到5M,甚至更多
  • 数据保存在本地磁盘(保存对象:JSON.stringfy()和JSON.parse())
  • 数据始终有效,窗口或浏览器关闭也一直保存
  • localStorage 在所有同源窗口中都是共享的

SessionStorage

  • 保存数据最大可以达到5M,甚至更多
  • 浏览器窗口(重点)
    • sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。
    • 仅在当前浏览器窗口关闭前有效
    • 只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。
    • 关闭窗口后,sessionStorage即被销毁。
    • 同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
    • sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面

TIP
数据持久化,需要注意数据保存的方式,保存的时间以及数据的清除工作
sessionStorage 、localStorage 和 cookie 三者都是保存在浏览器端,且同源的

支付宝打赏 微信打赏

赞赏是对我们的肯定!