前端缓存和存储分类

• 存储技术发展史

• 存储技术介绍

LocalStorage 和 sessionStorage

LocalStorage和sessionStorage都是HTML5提供的Web存储机制，它们通过键值对的形式存储数据，并且仅限于在浏览器端使用。

	LocalStorage	SessionStorage
作用	用于在浏览器端存储持久化数据	用于在浏览器端存储会话期间的临时数据
特点	- 数据持久化：存储的数据在浏览器关闭后仍然存在 - 容量较大：一般情况下，LocalStorage的容量较大，通常为5MB或更大 - 跨标签页共享：同一域名下的不同标签页可以共享同一个LocalStorage的数据	- 数据会话期间有效：存储的数据仅在当前会话期间有效，会话结束时数据被清除 - 容量较小：一般情况下，SessionStorage的容量较小，通常为5MB或更小 - 不跨标签页共享：不同标签页之间的SessionStorage数据不共享
差异	- 生命周期：LocalStorage的数据没有过期时间，除非主动清除，否则会一直存在 - 数据共享：LocalStorage的数据在同一域名下的不同标签页之间共享 - 存储量：LocalStorage的容量较大	- 生命周期：SessionStorage的数据仅在当前会话期间有效，关闭标签页或浏览器后数据被清除 - 数据不共享：SessionStorage的数据不在不同标签页之间共享 - 存储量：SessionStorage的容量较小
适用场景	- 长期存储用户偏好设置、用户身份信息等 - 缓存静态资源，提高网站性能 - 本地数据存储和离线应用程序	- 临时存储表单数据、页面状态等 - 多个页面间的数据共享 - 敏感数据的短期存储和使用
API	localStorage.setItem(key, value): 将指定的键值对存储到LocalStorage中。 localStorage.getItem(key): 根据键获取LocalStorage中存储的值。 localStorage.removeItem(key): 根据键从LocalStorage中移除对应的键值对。 localStorage.clear(): 清除LocalStorage中的所有键值对。 localStorage.key(index): 获取LocalStorage中指定索引位置的键名。 localStorage.length: 获取LocalStorage中存储的键值对数量。	sessionStorage.setItem(key, value): 将指定的键值对存储到SessionStorage中。 sessionStorage.getItem(key): 根据键获取SessionStorage中存储的值。 sessionStorage.removeItem(key): 根据键从SessionStorage中移除对应的键值对。 sessionStorage.clear(): 清除SessionStorage中的所有键值对。 sessionStorage.key(index): 获取SessionStorage中指定索引位置的键名。 sessionStorage.length: 获取SessionStorage中存储的键值对数量。