html 本地存储(localStorage and sessionStorage)
2017-08-28 10:25
204 查看
刚刚学习anjularJS和html的项目开发,其中在ui库中使用一种步骤类型的样式,其实就是form表单的ng-if判断显示,样式好用但也伴随着很多的问题,其中一个bug就是刷新会回到第一步,回到第一步的原因是刷新时会从新加载js代码,因为状态没变,所以就会出现无论刷新的哪一步,都会回到第一步,解决该问题的方法就是本地存储。
百度发现有两种存储方式,一个是sessionStorage,还有个localStorage, 两者的区别就是localStorage存的数据会一直保存,而sessionStorage的数据会在关闭窗口时丢失,所以要不是存储账号密码一类会一直使用的数据就不需要一直存储,这两个函数是用get和set的方法来存数据,所以我的存储本地步骤的代码如下。
百度发现有两种存储方式,一个是sessionStorage,还有个localStorage, 两者的区别就是localStorage存的数据会一直保存,而sessionStorage的数据会在关闭窗口时丢失,所以要不是存储账号密码一类会一直使用的数据就不需要一直存储,这两个函数是用get和set的方法来存数据,所以我的存储本地步骤的代码如下。
window.sessionStorage.setItem("Step", 1);//前面的step是变量名,1是给step赋值 window.sessionStorage.setItem("enterprise_id", data[0].enterprise_id);//同上 console.log( window.sessionStorage.getItem("Step"));打印值然后可以在刷新时从新加载js时,需要再判断一下这个变量是否有值。
if(sessionStorage.getItem("Step")==1) { $scope.filter.enterpriseStep = sessionStorage.getItem("Step"); $scope.othermodel.enterprise_id=sessionStorage.getItem("enterprise_id"); } else{ $scope.filter.enterpriseStep = sessionStorage.getItem("Step"); }刷新页面从新加载js时,可以判断到哪一步,就可以赋值到该步骤继续进行。
相关文章推荐
- HTML 本地存储(localStorage sessionStorage IndexedDB)
- 开发基于Safari的wap网站时,本地数据存储(sessionStorage localStorage sqlite)小结
- 本地存储(cookie&&sessionStorage&&localStorage)
- html5 本地存储-sessionStorage localStorage 本地数据库
- 本地存储 localStorage/sessionStorage/cookie
- sessionStorage/localStorage 本地存储
- HTML5 Web存储-localStorage and sessionStorage
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
- 在本地存储localStorage/sessionStorage中保存图片和文件(真的不适合保存文件图片大数据)
- 【html5】Web Storage本地存储 sessionStorage/localStorage
- 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)
- HTML5本地存储 -sessionStorage localStorage 总结
- [并发并行]_[C/C++]_[使用线程本地存储Thread Local Storage(TLS)调用复制文件接口的案例]
- Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic
- 线程本地存储(Thread Local Storage, TLS)简单分析与使用
- 浏览器本地存储-localStorage && globalStorage || sessionStorage || UserData
- HTML5+规范:Storage(管理应用本地数据存储区)
- cookie, sessionStorage and localStorage 之间的区别 与定义; 应用;
- 线程本地存储TLS(Thread Local Storage)的原理和实现——分类和原理
- 线程本地存储(Thread Local Storage, TLS)简单分析与使用