一、介绍
前端本地存储是指在浏览器中存储数据的机制,它允许前端开发者将数据保存在用户的浏览器中,以便在用户下次访问网站时可以使用这些数据。
前端本地存储有以下几种方式:
-
Cookie:Cookie 是最早也是最常用的前端本地存储方式之一。它可以存储少量的数据,并在每次请求中自动发送给服务器。但是,Cookie 的大小有限制,并且会被包含在每个请求中,会增加带宽消耗。
-
Web Storage:Web Storage 是 HTML5 引入的一种新的本地存储方式,包括了 localStorage 和 sessionStorage 两种存储方式。它们使用键值对的方式存储数据,可以存储更大的数据量,并且不会随着每次请求发送给服务器。
-
IndexedDB:IndexedDB 是一个新的浏览器内置数据库,可以存储大量的结构化数据。它使用异步 API 来访问数据,并支持事务操作和索引功能。
-
WebSQL:WebSQL 是一个已经过时的前端本地存储技术,它使用 SQL 查询语言来操作数据。虽然功能强大,但由于规范已经停止维护,不再推荐使用。
前端本地存储的优点是可以在客户端存储数据,减少对服务器的请求,提高网站性能和用户体验。但要注意安全性,避免存储敏感信息,并在需要时进行数据加密。这里我们主要对Web Storage进行介绍和展示。
二、本地储存分类
1.localStorage
localStorage可以将数据永久储存在本地,即用户的电脑,除非手动删除,否则关闭页面也会存在,可以多窗口进行共享(同一个浏览器),在浏览器中以键值对的形式进行储存。
常用语法
- 存储数据:localStorage.setItem(key,value);
- 获取数据:localStorage.getItem(key);
- 删除数据:localStorage.remove(key);
2.sessionStorage
sessionStorage的用法与localStorage的基本相同,对象名字一改就能用,其特性如下:
- 生命周期为关闭浏览器窗口;
- 在同一个窗口(页面)下数据可以共享;
- 以键值对的形式储存;
三、存储复杂数据类型
本地储存只能存储字符串,无法存储复杂数据类型,我们如果想储存对象,就得先将其转换成json字符串,再存储到本地。
常用语法
- JSON.stringify():将对象转换为json字符串;
- JSON.parse():将字符串转换为对象。