HTML5引入了本地存储的概念,使得开发人员能够在浏览器中存储和检索数据,而无需使用服务器进行数据交换。HTML5提供了两种主要类型的本地存储对象:localStorage和sessionStorage。
localStorage
localStorage是一个键值对存储对象,它允许开发人员存储字符串形式的数据,并且在同一域名下的网页中共享数据。
存储数据
我们可以通过localStorage.setItem方法存储数据。该方法接受两个参数,第一个参数为指定的键,第二个参数为要存储的值。例如:
-------------------------------- --------
这会将一个键名为“username”的条目添加到localStorage中并将其值设置为“John”。
检索数据
要检索存储在localStorage中的数据,请使用localStorage.getItem方法。该方法接受一个参数,即要检索的键名。例如:
----- -------- - --------------------------------- ---------------------- -- --- ----
删除数据
要从localStorage中删除数据,请使用localStorage.removeItem方法,并将要删除的条目的键名作为参数传递给该方法。例如:
------------------------------------
示例代码
以下是一个简单的示例代码,演示如何在localStorage中存储、检索和删除数据。
-- ---- -------------------------------- -------- -- ---- ----- -------- - --------------------------------- ---------------------- -- --- ---- -- ---- ------------------------------------
sessionStorage
sessionStorage对象与localStorage对象的工作方式类似,但是存储在其中的数据仅在当前会话期间有效。如果用户关闭了浏览器选项卡或窗口,则存储在sessionStorage中的数据将被删除。
存储数据
我们可以通过sessionStorage.setItem方法存储数据。该方法接受两个参数,第一个参数为指定的键,第二个参数为要存储的值。例如:
---------------------------------- --------
这会将一个键名为“username”的条目添加到sessionStorage中并将其值设置为“John”。
检索数据
要检索存储在sessionStorage中的数据,请使用sessionStorage.getItem方法。该方法接受一个参数,即要检索的键名。例如:
----- -------- - ----------------------------------- ---------------------- -- --- ----
删除数据
要从sessionStorage中删除数据,请使用sessionStorage.removeItem方法,并将要删除的条目的键名作为参数传递给该方法。例如:
--------------------------------------
示例代码
以下是一个简单的示例代码,演示如何在sessionStorage中存储、检索和删除数据。
-- ---- ---------------------------------- -------- -- ---- ----- -------- - ----------------------------------- ---------------------- -- --- ---- -- ---- --------------------------------------
深入理解本地存储
除了简单的键值对存储之外,localStorage和sessionStorage还有其他有用的功能。
存储对象
虽然localStorage和sessionStorage只能存储字符串,但可以使用JSON.stringify方法将一个对象转换为字符串,并使用JSON.parse方法将其转换回对象。例如:
----- ---- - - ----- ------- ---- -- -- ---------------------------- ---------------------- ----- ---------- - ----------------------------------------- ------------------------ -- --- - ----- ------- ---- -- -
存储数组
与存储对象相同,您也可以使用JSON.stringify和JSON.parse方法来存储和检索数组。例如:
----- ------ - ------- -------- -------- ------------------------------ ------------------------ ----- ------------ - ------------------------------------------- ------- - ---------------------------------------------------------- -------- -------------------------------------------------------------------------------------