HTML5 sessionStorage会话存储

  sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。

目录

1. 介绍

  1.1 说明

  1.2 特点

  1.3 浏览器最小版本支持

  1.4 适合场景

2. 成员

  2.1 属性

  2.2 方法

3. 示例

  3.1 存储数据

  3.2 读取数据

  3.3 存储Json对象

1. 介绍

1.1 说明

sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

1.2 特点

1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一域名和同一端口下。

2) 单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下

可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。

1.3 浏览器最小版本支持

支持sessionStorage的浏览器最小版本:IE8、Chrome 5。

1.4 适合场景

sessionStorage 非常适合SPA(单页应用程序),可以方便在各业务模块进行传值。

2. 成员

2.1 属性

 readonly int sessionStorage.length :返回一个整数,表示存储在 sessionStorage 对象中的数据项(键值对)数量。

2.2 方法

 string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

 string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

 void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

 void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。

 void sessionStorage.clear() :清除 sessionStorage 对象所有的项。

3. 示例

3.1 存储数据

3.1.1 采用setItem()方法存储

sessionStorage.setItem(‘testKey‘,‘这是一个测试的value值‘); // 存入一个值

3.1.2 通过属性方式存储  

sessionStorage[‘testKey‘] = ‘这是一个测试的value值‘;

  

3.2 读取数据

3.2.1 通过getItem()方法取值

sessionStorage.getItem(‘testKey‘); // => 返回testKey对应的值

3.2.2 通过属性方式取值

sessionStorage[‘testKey‘]; // => 这是一个测试的value值

3.3 存储Json对象

sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为文本格式;读取时,通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: ‘tom‘,
    age: 22
};

// 存储值:将对象转换为Json字符串
sessionStorage.setItem(‘user‘, JSON.stringify(userEntity));

// 取值时:把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem(‘user‘);
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

==================================系列文章==========================================

本篇文章:6.6 HTML5 sessionStorage会话存储

Web开发之路系列文章

时间: 2024-11-01 10:32:53

HTML5 sessionStorage会话存储的相关文章

通过sessionStorage会话存储实现页面跳转之后返回到当前位置 (刷新跳回顶部)【2】

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

html5客户端本地存储之sessionStorage及storage事件

首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方法也几乎一样: 非常通俗易懂的接口: sessionStorage.getItem(key):获取指定key本地存储的值sessionStorage.setItem(key,value):将value存储到key字段sessionStorage.removeItem(key):删除指定key本地存储的值

Cookies,localStorage,sessionStorage,Web SQL Database(客户端)会话存储学习

客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据.目前常见的浏览器端数据存储方法有:Cookies,Local Storage,Session Storage,IndexedDB 取值,存值,删除(用于浏览器存储客户端的访问数据) 1.Cookies Cookies 是一种在文档内存储字符串数据最典型的方式.一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端.这可以用于诸如管理用户会话,追踪用户信息等事情. Cookies

会话存储sessionStorage

会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的).我们通过全局sessionStorage访问会话存储,它返回一个Storage对象,该对象与本地存储里的是一样的. sessionStorage案例1: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <t

【html5】html5本地简单存储

html5本地简单存储 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage.Web Sql Database. 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的,复杂的数据,我习惯把前面的三个称之为小存储. 简单存储与cookie的区别 1.存储量大①web存储比cookie存储量更大,在数据量上可以达到5M,而cookie最多也就4KB,或者20个key/value对.2.安全

基于 HTML5 的数据存储

以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5的各种保存数据的方法.在此简单与大家分享一下. 前四种是从http://www.hightopo.com/blog/344.html截取. Cookie 最古老的存储方式为Cookie,这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,为了介绍HTML5存储方案的完整性我顺

html5的本地存储

正好刚刚写了javaweb的session存储,反正还早....就把html5的本地存储一块写了吧 cookie 在说html5的本地存储之前,不得不说下在它之前的本地存储cookie. cookie存储在浏览器端,并且会随着浏览器的请求一起传到服务器段,它有一定的过期时间,到了过期时间会自动消失. 小伙伴么可以打开浏览器自己看一下 默认生命周期是浏览器关闭.当然你任性,也可以自己设置 1 Response.Cookies(name).Expires = Date +1; (时间函数+N) ja

Html5的Web存储和WebSql

HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 本地存储的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Coo

利用html5的本地存储写的一个购物车

好久没有写博客园了,很多知识没有记录下来:可惜: 这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车: 这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是: 以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了: 如果代码是自己写的,就有版权,这么说.对吧,是在软件工程师书上看到的: 不