html 本地存储（localStorage and sessionStorage）

最新推荐文章于 2025-05-26 22:23:54 发布

原创最新推荐文章于 2025-05-26 22:23:54 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍在AngularJS项目中使用sessionStorage解决表单步骤刷新后回退问题的方法。通过设置和获取本地存储的步骤值，确保用户刷新页面后仍停留在当前步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚学习anjularJS和html的项目开发，其中在ui库中使用一种步骤类型的样式，其实就是form表单的ng-if判断显示，样式好用但也伴随着很多的问题，其中一个bug就是刷新会回到第一步，回到第一步的原因是刷新时会从新加载js代码，因为状态没变，所以就会出现无论刷新的哪一步，都会回到第一步，解决该问题的方法就是本地存储。

百度发现有两种存储方式，一个是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时，可以判断到哪一步，就可以赋值到该步骤继续进行。