HTML5本地存储-sessionStorage使用示例

最新推荐文章于 2025-10-01 09:35:49 发布

转载最新推荐文章于 2025-10-01 09:35:49 发布 · 577 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=jicca122j&title=HTML5%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8-sessionStorage%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B

文章标签：

#Html5

前端专栏收录该内容

493 篇文章

订阅专栏

本文深入解析了HTML5 WebStorage中sessionStorage的使用方法及其特性。sessionStorage用于存储会话级别的数据，仅在同一会话的页面间共享，并在会话结束时清除。文章详细介绍了其接口功能，包括获取、设置和删除项，以及如何清空整个存储。

sessionStorage作为HTML5的Web Storage的两种存储方式之一。用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。不是一种持久化的本地存储。会话级的存储。

1、接口
    sessionStorage.getItem(key)          ---- 获取指定key的本地存储的值
    sessionStorage.setItem(key,value) ---- 将value存储到key字段中
    sessionStorage.removeItem(key)    ---- 删除指定ke的本地存储的值
    sessionStorage.length                     ---- sessionStorage的项目数

/*
sessionStorage和localStorage都支持key()和length
*/

var storage = window.localStorage,
      i,
      len = storage.length;
for(i=0;i<len;i ){
   var key = storage.key(i);
   var value = storage.getItem(key);
   console.log(key '=' value);
}

/*
清空本地存储的数据
*/
localStorage.clear(); ----删除所有同源的本地存储的localStorage数据

sessionStorage.clear(); ----只清空当前会话存储的数据