`
zhangyaochun
  • 浏览: 2608753 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

浅谈本地存储之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();  ----只清空当前会话存储的数据
 
 
1
2
分享到:
评论
2 楼 yuanliangding 2012-02-15  
key()很重要。
1 楼 yuanliangding 2012-02-15  
减轻服务器的session吧。呵。不错。WEB越来越桌面了。

相关推荐

    sessionStorage本地存储数据实例

    其中,`sessionStorage` 是一种重要的本地存储方式,它主要用于在同一个浏览器窗口或标签页内存储用户会话期间的数据。与`localStorage`不同,`sessionStorage`中的数据在浏览器关闭后将被清除,确保数据安全且只...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    localStorage提供持久化的本地存储,数据在用户关闭浏览器后再打开仍可保留。其主要操作方法包括: - `setItem(key, value)`:用于存储数据,`key`为键,`value`为值。 - `getItem(key)`:根据键获取存储的数据。 - ...

    一个本地存储工具控制localStorage和sessionStorage

    本文将详细讲解这个名为“本地存储工具”的项目,它提供了一个统一的API来管理和操作`localStorage`和`sessionStorage`。 首先,`localStorage`和`sessionStorage`的主要区别在于数据的生命周期和作用域。`...

    jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    在现代Web开发中,浏览器提供了多种方式来存储用户数据,其中最常见的是Cookie、localStorage和sessionStorage。这些机制使得开发者可以在客户端本地存储信息,从而提高应用性能,减少对服务器的依赖,同时也为用户...

    html5-本地存储

    1. **存储容量**:本地存储提供更大的存储空间,默认为5MB,而Cookie的大小限制通常为4KB。 2. **生命周期**:本地存储的数据除非被明确删除,否则一直保存在客户端,而Cookie可以根据设置有过期时间。 3. **数据...

    HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...

    HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

    使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...

    多頁面共享sessionStorage並同步至vuex範例

    然而,在多页面应用中,如果想要在不同页面之间共享数据,通常会遇到SessionStorage的局限,因为每个浏览器标签页都有独立的存储空间。针对这个问题,我们可以结合Vue.js和Vuex来实现跨页面的数据共享和同步。 Vue....

    H5 localStorage 和 sessionStorage 对json的处理方式

    在JavaScript中,我们可以使用`JSON.stringify()`方法将JavaScript对象转换为JSON字符串,然后可以存储到localStorage或sessionStorage;反之,使用`JSON.parse()`方法将JSON字符串解析回JavaScript对象。 2. ...

    clientpersist是localForage的分支支持sessionStorage的Web客户端离线存储

    client-persist:是localForage的分支,支持sessionStorage的Web客户端离线存储。 支持使用API轻松抓取IndexedDB,WebSQL,localStorage和sessionStorage。

    HTMl5的存储方式sessionStorage和localStorage详解

    HTML5的Web Storage引入了两种新的本地数据存储方式:`sessionStorage`和`localStorage`,它们解决了传统Cookie在存储容量和性能上的限制,为Web应用提供了更高效的数据管理能力。 `sessionStorage`主要用于存储...

    一种更好的方法来使用localStorage和sessionStorage

    在JavaScript的世界里,`localStorage`和`sessionStorage`是两种非常重要的Web存储机制,它们允许开发者在用户浏览器中保存数据,以便在用户关闭并重新打开页面后仍然可以访问。这两个API是HTML5引入的,极大地扩展...

    【温故而知新】HTML5存储localStorage:sessionStorage.md

    通过以上介绍,我们可以看出`localStorage`和`sessionStorage`为网页开发者提供了强大的本地存储能力,它们不仅可以改善用户体验,还能提升应用程序的功能性和性能。但在使用过程中,还需要注意相关的安全和限制问题...

    HTML5的本地存储

    本地存储主要包括两个API:`localStorage` 和 `sessionStorage`。 #### 二、`localStorage` `localStorage` 是HTML5本地存储机制的一部分,用于长期保存数据。这些数据即使在用户关闭浏览器后仍然保留,并且只有...

    localStorage,sessionStorage的使用

    localStorage和sessionStorage在使用上有很多相似之处,但也存在关键性的差异。 ### localStorage的基本概念和用法 localStorage提供了一种在客户端存储数据的机制,其特点包括域内安全和永久保存。所谓域内安全...

    使用Typescript编写更加易用的localStorage和sessionStorage的API

    在JavaScript开发中,`localStorage`和`sessionStorage`是两种常用的浏览器存储机制,它们允许开发者在用户浏览器上持久化数据。然而,它们的原生API使用起来并不直观,需要处理字符串化和反字符串化的问题,同时也...

    本地存储javascript类库

    2. **兼容性处理**:通过检测浏览器的本地存储能力,`persist-js`会自动选择最佳的存储方案,如`localStorage`、`sessionStorage`或回退到模拟的Cookie存储。 3. **数据操作**:库提供了添加、获取、更新、删除数据...

Global site tag (gtag.js) - Google Analytics