文档章节

sessionStorage保存数据以便页面间进行数据传递

wftt
 wftt
发布于 2018/03/27 14:37
字数 588
阅读 168
收藏 0

 

源于需求的不断变化,就会想到在一个网站中,多个页面怎样进行数据的传递?比如首页的某个状态或者信息在其他页面做逻辑判断时需要使用到该怎么办?这也就是页面间进行数据传递,很好,sessionStorage和localStorage就是存储数据的,一个是会话存储,一个是本地存储,区别想必也和容易理解。

先介绍关系,再上代码。

联系:

(1)localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

(2)均只能存储字符串类型的对象。

(3)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

同源:域名,协议,端口相同。

区别:

sessionStorage:生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

代码:

session操作:

//首页JS部分的session操作:
sessionStorage.setItem('state','1');
sessionStorage.getItem('state');
console.log(sessionStorage.getItem('state'));  // 1
//另一页面的session操作
var getState = sessionStorage.getItem('state');
console.log(getState);   // 1

 local操作:

​//首页JS部分的local操作:
localStorage.setItem('state','1');
localStorage.getItem('state');
console.log(localStorage.getItem('state'));  // 1

​
//另一页面的local操作
var getState = localStorage.getItem('state');
console.log(getState);   // 1

很简单,就这样已经实现了存储和传递。在控制台中Application查看,可以发现Session Storage中state在浏览器没有关闭时数据始终存在,关闭之后清空。而Local Storage中state始终存在,直到人为删除数据。

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
第139天:详解cookie、 sessionStorage 和localStorage

1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否...

半指温柔乐
2018/01/08
0
0
HTML5编程之旅 第6站Web Storage

Web Storage,有时也称为DOMStorage,它提供在Web请求之间持久化数据,在此之前,远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage,开发者可以将需要跨请求重...

倪伟伟
2014/03/26
104
0
Vue2.0学习(三)--Vue数据通信详解

一、前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据...

人心思动
2018/08/09
0
0
sessionStorage保存滚动条位置

1、localStorage、sessionStorage他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。 2、localStorage生命周期是永久,这意味...

少年已不再年少
2018/08/20
20
0
Flutter数据持久化入门以及与Web开发的对比

对于大部分安卓或者IOS开发人员来说,App的数据持久化可能是很平常的一个话题。但是对于Web开发人员来说,可能紧紧意味着localStorage和sessionStorage。 Web开发 localStorage和sessionStor...

阿尔卑斯de秘密
2018/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
12
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.3K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部