应用(Application)选项卡

应用(Application)选项卡是浏览器的一个开发者工具，用于查看网站的应用程序相关信息。包含多个面板，Manifest、Service Workers、Cache Storage、Application、IndexedDB、Web SQL、Local Storage、Session Storage、Cookies等。

Manifest面板

用于查看网站的Web App Manifest文件，包括应用程序名称、图标、主题颜色等信息。

Service Workers面板

用于查看网站的Service Worker信息，包括状态、版本、缓存等信息。

Cache Storage面板

用于查看网站的缓存信息，包括缓存名称、缓存大小、缓存内容等信息。

IndexedDB面板

用于查看网站的IndexedDB数据库信息，包括数据库名称、版本、对象存储等信息。

Web SQL面板

用于查看网站的Web SQL数据库信息，包括数据库名称、版本、表格等信息。

Local Storage面板

用于查看网站的本地存储信息，包括键值对、占用空间等信息。

存储数据

要将数据添加到Local Storage中，我们可以使用localStorage对象的setItem()方法，该方法接受一个键和一个值作为参数。例如，我们可以将一个用户名存储在Local Storage中：

localStorage.setItem('username', 'John');

获取数据

要从Local Storage中获取数据，我们可以使用localStorage对象的getItem()方法，该方法接受一个键作为参数。例如，我们可以获取存储在Local Storage中的用户名：

const username = localStorage.getItem('username');

更新数据

要更新Local Storage中的数据，我们可以使用setItem()方法，只是要使用相同的键但是替换旧值为新值。例如，我们可以将存储的用户名从'John'更新为'Jane'：

localStorage.setItem('username', 'Jane');

删除数据

要从Local Storage中删除数据，我们可以使用localStorage对象的removeItem()方法，该方法接受一个键作为参数。例如，我们可以删除Local Storage中的用户名：

localStorage.removeItem('username');

清空数据

要清空Local Storage，我们可以使用localStorage对象的clear()方法：

localStorage.clear();

Session Storage面板

用于查看网站的会话存储信息，包括键值对、占用空间等信息。

存储数据

要将数据添加到 Session Storage 中，我们可以使用 sessionStorage 对象的 setItem() 方法，该方法接受一个键和一个值作为参数。例如，我们可以将一个用户名存储在 Session Storage 中：

sessionStorage.setItem('username', 'Tom');

获取数据

要从 Session Storage 中获取数据，我们可以使用 sessionStorage 对象的 getItem() 方法，该方法接受一个键作为参数。例如，我们可以获取存储在 Session Storage 中的用户名：

const username = sessionStorage.getItem('username');

更新数据

要更新 Session Storage 中的数据，我们可以使用 setItem() 方法，只是要使用相同的键但是替换旧值为新值。例如，我们可以将存储的用户名从 'Tom' 更新为 'Jerry'：

sessionStorage.setItem('username', 'Jerry');

删除数据

要从 Session Storage 中删除数据，我们可以使用 sessionStorage 对象的 removeItem() 方法，该方法接受一个键作为参数。例如，我们可以删除 Session Storage 中的用户名：

sessionStorage.removeItem('username');

清空数据

要清空 Session Storage，我们可以使用 sessionStorage 对象的 clear() 方法：

sessionStorage.clear();

Cookies面板

用于查看网站的cookie信息，包括cookie名称、值、过期时间、占用空间等信息。

设置一个cookie

要在用户的计算机中设置一个cookie，网站可以向浏览器发送一个HTTP响应头，以便在响应中包含一些cookie信息。例如，要设置一个名为“username”的cookie，它的值为“John Doe”，并且它应在浏览器关闭后过期，可以使用以下代码：

document.cookie = "username=John Doe; expires=0;";

获取一个cookie

要从用户的计算机中获取一个cookie，网站可以读取浏览器的cookie属性。例如，要获取名为“username”的cookie，可以使用以下代码：

const cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1");

更新一个cookie

要更新一个cookie，可以使用与设置cookie相同的代码，只是要使用相同的cookie名称，但是替换旧值为新值。例如，要将名为“username”的cookie从“John Doe”更新为“Jane Doe”，可以使用以下代码：

document.cookie = "username=Jane Doe; expires=0;";

删除一个cookie

要从用户的计算机中删除一个cookie，可以设置它的失效日期为过去的时间。例如，要删除名为“username”的cookie，可以使用以下代码：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

平时开发常用的有Local Storage、Session Storage、Cookies