js教程（12）——本地储存

一、介绍

        前端本地存储是指在浏览器中存储数据的机制，它允许前端开发者将数据保存在用户的浏览器中，以便在用户下次访问网站时可以使用这些数据。

前端本地存储有以下几种方式：

1. Cookie：Cookie 是最早也是最常用的前端本地存储方式之一。它可以存储少量的数据，并在每次请求中自动发送给服务器。但是，Cookie 的大小有限制，并且会被包含在每个请求中，会增加带宽消耗。

2. Web Storage：Web Storage 是 HTML5 引入的一种新的本地存储方式，包括了 localStorage 和 sessionStorage 两种存储方式。它们使用键值对的方式存储数据，可以存储更大的数据量，并且不会随着每次请求发送给服务器。

3. IndexedDB：IndexedDB 是一个新的浏览器内置数据库，可以存储大量的结构化数据。它使用异步 API 来访问数据，并支持事务操作和索引功能。

4. 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（）：将字符串转换为对象。