Web Storage本地储存

WebStorage详解

最新推荐文章于 2025-12-07 19:40:07 发布

原创最新推荐文章于 2025-12-07 19:40:07 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

html5 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析HTML5中的WebStorage，涵盖sessionStorage与localStorage的区别及应用。sessionStorage适用于会话级存储，数据随会话结束而销毁；localStorage提供持久化存储，数据除非手动删除，否则永久保存。文中详细介绍了setItem、getItem、removeItem和clear四种操作方法。

Web Storage本地储存

HTML5中的储存包括两种：sessionStorage 和 localStorage
sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

setItem(key,value)：添加本地存储数据。
getItem(key):通过key获取相应的Value。
removeItem(key):通过key删除本地数据。
clear():清空数据。

代码：

//setItem存储value
//用途：将value存储到key字段
//用法：.setItem( key, value)
//代码示例：
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

//getItem获取value
//用途：获取指定key本地存储的值
//用法：.getItem(key)
//代码示例：
var value = sessionStorage.getItem("key");  
 var site = localStorage.getItem("site");

//removeItem删除key
//用途：删除指定key本地存储的值
//用法：.removeItem(key)
//代码示例：
sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

//clear清除所有的key/value
//用途：清除所有的key/value
//用法：.clear()
//代码示例：
sessionStorage.clear();
localStorage.clear();