关于h5中存储sessionstorage的一些用法

zhaoff      2022-02-14     184

关键词:

最近在用H5做一个项目。其中有一个需求是在tab栏列表页点击列表数据进入详情页,当点击详情页的返回按钮时能够返回列表页并且不刷新数据同时还要保留原tab栏的状态。然后就开始想出一系列想法~~

在这里先说一下sessionStorage的用法:

1、setItem存储value:(代码示例)

sessionStorage.setItem("key", "value");//sessionStorage.setItem("name", "zhansan");

2、getItem获取value:(代码示例)

 var value = sessionStorage.getItem("key"); //var name = localStorage.getItem("name")

说明一点sessionStorage的特性:本地存储,关闭浏览器的时候,数据就会被清除,如果你想要用它做到页面之间传值的话,需要用到a链接,不然是取不到数据的,你可以自己去试试~

再来说一下上面的需求怎样解决呢?

解决办法:

列表页tab栏的状态可用sessionStorage存储
var hash = sessionStorage.setItem("status‘,hash);
...
...
hash= sessionStorage.getItem(‘status‘)
if(hash==0){
$("li").addClass(‘active‘).sibings().removeClass("active")
}else if(hash==1){
$("li").addClass(‘active‘).siblings().removeClass(‘acctive‘);
}else if(hash==2){
...
}

   在tab列表页给数据添加a链接到你要跳转的页面,点击返回按钮的时候使用浏览器的返回api

$(".arrow").on("click",function () {
window.history.back()
})

 





关于h5本部缓存localstorage,sessionstorage

...存储数据的新方法:localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效... 查看详情

[html5]sessionstorage和localstorage的区别

...作为客户端的数据持久化。h5中webstorage有两种存储方式:sessionStorage和localStorage。sessionStorage:用于存储一次会话的数据,这些数据只有在同一个会话中的页面才能访问到,当会话结束后,数据也随之销毁,可以这样形容sessionStorag... 查看详情

h5本地存储sessionstorage和localstorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户关闭浏览器窗... 查看详情

h5本地存储:sessionstorage和localstorage(代码片段)

...间:2018-05-0118:30H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下:1.sessionStorage:保存的是一个会话的数据,也就是说只在一次会话中有效,关闭就会销毁数据,不是持久的本地数据存储,只是... 查看详情

关于sessionstorage的移动端兼容问题

...只要记住当前打开窗口的用户数据就行,所以我选择用的sessionStorage。使用场景如下:A.html页面需要记录一条数据{a:1,b:2};sessionStorage.setItem("data","{a:1,b:2}");B.html页面取出使用;sessionStorage.getItem("data");//获取结果为nu 查看详情

h5的本地存储——sessionstorage,localstorage

...存储数据的新方法:localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储SessionStorage,LocalStorage,Cookie这三者都可以被用来在浏览器端存储数据,localStorage和sessionStorage都是本地存储。 Cookie会在每次发送HTTP请... 查看详情

html5的sessionstorage和localstorage的一些区别

...3.难以操作。 html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionS... 查看详情

用localstorage来存储数据的一些经验

...,即使你关闭了客户端(浏览器),属于本地持久层储存sessionStorage:用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。 localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionSt... 查看详情

h5之本地存储

 localstorage1.添加localStorage.name=‘xiaoyi‘;//存sessionStorage.name=‘lili‘;//存sessionStorage.setItem(‘name‘,‘lili‘);//存存一样的会被覆盖2.获取sessionStorage.name;//获取sessionStorage.getItem(‘name‘);//获取  查看详情

h5的storage(sessionstorage&localstorage)简单存储删除

众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同下面直接上代码,storage中的存储与删除: <!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metaname="viewport"conte 查看详情

h5localstorage存储大小(转)

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

h5新增浏览器本地缓存localstorage

...记(非原创) html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此session... 查看详情

localstorage,sessionstorage

...储.  现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。  两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个... 查看详情

h5存储方案——cookiesessionsessionstorage和localstorage

...简述浏览器端存储网页中的数据有三种存储方案:cookie、SessionStorage和LocalStorage。其中:SessionStorage和LocalStorage是H5新增的存储方案。而cookie经常同session一并提起,它们的主要区别:cookie:会话跟踪技术客户端(浏览器)session;... 查看详情

浏览器相关--h5本地存储

...术。浏览器存储主要包括一下几个部分1.cookie2.localStorage3.sessionStorage4.indexDB5.websql6.window变量7.flashcookie下面具体说一下,虽然也没特别具体。。。1、cookie这个存储用了很久了,而且也是以前大多网站十 查看详情

localstorage单页面及不同页面监听变动(代码片段)

...cript语言来使用,而WebStorage提供了两种存储类型API: sessionStorage和localStorage,二者的差异主要是数据的保存时长及数据的共享方式。那么,如何监测本地存储webstorage的数据是否改变呢?在H5中,window对象里面有一个storage事件... 查看详情

h5数据保存之storage

window.sessionStorage——会话级存储:      在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器),会话级数据即消失。  ... 查看详情

关于浏览器的一些知识

...ss等)5.数存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)   &n 查看详情