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

说明:

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

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

适用场景:

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

其实:

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage:关闭页面就会销毁存储的数据

localStorage:用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

-------下面我们来看看他有哪些属性和方法-------

属性:

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

方法:

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 对象所有的项。

-------示例-------

存储数据
//采用setItem()方法存储
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
//通过属性方式存储
sessionStorage['testKey'] = '这是一个测试的value值';

读取数据
//通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
//通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值

它也可以存储对象(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);

数组:

var arra=[1,2,3,4];

localStorage.setItem('key',JSON.stringify(arra));

var read=JSON.parse(localStorage.getItem('key'));

console.log(read,read.length);



注意: 

  1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)

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

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

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

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

浏览器版本支持:

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



再来个小demo:

    

样式:

#container { border: 2px solid gray; width: 320px; text-align:center; }

html:

 <div id="container">
<br>
<label for="username">姓名:</label>
<input type="text" id="username" name="username">
<br>
<label for="mobilephone">手机:</label>
<input type="text" id="mobilephone" name="mobilephone">
<br><br>
<input type="button" onclick="add()" id="add" value="增加联系人">
<br><br>
<hr>
<label for="search">输入姓名:</label>
<input type="text" id="search" name="search">
<br><br>
<input type="button" onclick="find()" id="find" value="查找手机号">
<p id="result"><br></p>
</div>

js:

 var user = document.getElementById('username'),
phone = document.getElementById('mobilephone'),
search = document.getElementById('search'),
result = document.getElementById('result');
var add = function(){
var u = user.value,
p = phone.value,
l = localStorage.length;
if(u !== '' && p !== ''){
localStorage.setItem(u, p);
user.value = '';
phone.value = '';
alert('添加成功');
}
};
var find = function(){
var s = search.value,
r = localStorage.getItem(s);
if(s !== '' && r){
result.innerHTML = r;
}
};

偏前端-HTML5 sessionStorage-会话存储的更多相关文章

  1. HTML5 sessionStorage会话存储

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

  2. 前端HTML5几种存储方式的总结

    接下来要好好总结一些知识,秋招来啦...虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~ 总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大 ...

  3. Token和SessionStorage(会话存储对象)

    sessionStorage数据只在当前标签页共享 存在本地   关闭浏览器后会清除数据(关闭标签页不会清楚) localStorage数据会存在浏览器中  浏览器关了数据也还在 只有清除缓存才会消失 ...

  4. 前端HTML5几种存储方式

    h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE ...

  5. localStorage(本地存储器)、sessionStorage(会话存储)

      设置:localStorage.setItem("token", JSON.parse(res).data.token);   获取:that.token = localSto ...

  6. HTML5 LocalStorage 本地存储,刷新值还在

    H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...

  7. sessionStorage 前端HTML5会话管理

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

  8. python爬虫遇到会话存储sessionStorage

    记录一次爬虫生成链接过程中遇到的sessionStorage存储数据 1.简介 sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标 ...

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

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

随机推荐

  1. Visual Studio Code 之 运行java代码

    1.安装扩展. 2.安装成功后,会在右键菜单中多出一个选项: 更改vscode“用户设置”文件:添加java.home(jdk目录)以及runcode显示在终端(解决中文乱码问题) code runn ...

  2. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  3. Azure 负载内部均衡器概述

    Azure 内部负载均衡器 (ILB) 仅将流量定向到云服务内的资源,或使用 VPN 来访问 Azure 基础结构. 在这一点上,ILB 与面向 Internet 的负载均衡器不同. Azure 基础 ...

  4. selenium+python smtp邮件

    #code:utf-8 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIM ...

  5. January 11 2017 Week 2nd Wednesday

    One always has time enough, if one will apply it well. 如果你能好好地利用,你总有足够的时间. If you always feel that y ...

  6. January 01 2017 Week 1st Sunday

    This is a new year. A new beginning. And things will change. 新一年,新开始,新气象. Hey Hey Hey. I can see my ...

  7. [EffectiveC++]item13:Use objects to manage resources(RAII)

    baidu百科 RAII 百科名片 RAII,也称为“资源获取就是初始化”,是c++等编程语言常用的管理资源.避免内存泄露的方法.它保证在任何情况下,使用对象时先构造对象,最后析构对象. 目录 RAI ...

  8. C#3.0新特性:隐式类型、扩展方法、自动实现属性,对象/集合初始值设定、匿名类型、Lambda,Linq,表达式树、可选参数与命名参数

    一.隐式类型var 从 Visual C# 3.0 开始,在方法范围中声明的变量可以具有隐式类型var.隐式类型可以替代任何类型,编译器自动推断类型. 1.var类型的局部变量必须赋予初始值,包括匿名 ...

  9. Chapter 1 Secondary Sorting:Introduction

    开始学习<数据算法:Hadoop/Spark大数据处理技巧>第1-5章,假期有空就摘抄下来,毕竟不是纸质的可以写写画画,感觉这样效果好点,当然复杂的东西仍然跳过.写博客越发成了做笔记的感觉 ...

  10. js调用echarts getImage方法 将图表转换为img

    function chart(opt,id,chartName){//配置option的方法 var chartName = echarts.init(document.getElementById( ...