Ionic + AngularJS 实现页面间数据传递：LocalStorage 本地存储实战
本文介绍在 Ionic 与 AngularJS 构建的混合移动应用中，如何利用 HTML5 LocalStorage 实现页面 A 到页面 B 的数据传递。通过滑动事件触发存储操作，并在目标页面控制器中读取数据，解决跨页面状态保持问题。
前言与需求背景
前言：
当前项目采用 Ionic 结合 AngularJS 技术栈开发混合模式移动应用。近期遇到一个具体需求：用户在页面 A 执行滑动操作后跳转至页面 B，而页面 B 需要加载并展示页面 A 的相关数据。针对这种跨页面的数据传递场景，采用 LocalStorage 本地存储方案是可行的解决路径。
Ionic 与 AngularJS 框架介绍
Ionic 框架概述
Ionic 被视为目前极具潜力的 HTML5 手机应用开发框架。它基于 SASS 架构，提供了丰富的 UI 控件以辅助开发者构建功能强大的应用。结合 AngularJS 使用，能够显著提升 Ionic 应用的用户体验，且代码实现相对简洁。
AngularJS 框架概述
AngularJS 建立在 JavaScript 基础之上，JavaScript 是目前应用最广泛且灵活性极高的编程语言之一。AngularJS 提供了一套完整的前端应用软件包。对于 Web 开发人员而言，AngularJS 以框架形式封装了复杂性，使开发者只需关注核心功能实现。更多详细信息可参考作者之前的博客文章。
HTML5 客户端数据存储机制
客户端数据存储机制：localStorage 与 sessionStorage
HTML5 引入了两种在客户端存储数据的新机制：
- localStorage：提供无时间限制的数据存储功能。
- sessionStorage：针对单个会话（session）的数据存储。
在此之前，数据存储主要依赖 Cookie。然而，Cookie 不适合大量数据存储，因为每次服务器请求都会传递 Cookie，导致速度慢且效率低。HTML5 中的数据仅在请求时由客户端使用，不影响服务器请求，从而允许在不影响网站性能的前提下存储大量数据。不同网站的数据存储在各自独立的区域，且一个网站只能访问其自身的数据。
LocalStorage 特性与使用方法
LocalStorage 本地存储详解
相较于其他本地存储方案，LocalStorage 具有容量大、易用性强、功能强大及原生支持等优点。其缺点在于兼容性相对较差（Chrome、Safari、Firefox 及 IE 9 及以上版本支持，但 IE 8 及以下版本不支持）以及安全性较低（因此不建议使用 LocalStorage 保存敏感信息）。LocalStorage 保存的数据通常永久有效，只要通过 LocalStorage 保存信息，数据将一直存储在用户客户端中。即使用户关闭浏览器后重新启动，数据依然存在，直到用户或程序明确执行删除操作，数据生命周期才会结束。在安全性方面，LocalStorage 基于域安全，即同一域下的所有页面均可访问该 LocalStorage 数据。
LocalStorage 的四种常用方法：
- localStorage.getItem(key)：用于获取指定 key 对应的本地存储值。
- localStorage.setItem(key, value)：用于将 value 存储到指定的 key 字段中。
- localStorage.removeItem(key)：用于删除指定 key 对应的本地存储值。
- localStorage.length：用于获取 LocalStorage 中存储的项目数量。
Ionic 页面间数据传递实战
项目实战：
evaluationTaskCtrl 控制器代码（controller.js）
/*登陆controller*/
.controller('evaluationTaskCtrl', function($scope,$state,evaluationTaskService,studentEvaluateService) {
//右滑动跳入卷子界面-zzzzzz
$scope.onSwipeLeft = function(EvaluateCourse) {
localStorage.setItem("PaperId", EvaluateCourse[0].PaperId);
localStorage.setItem("TeacherName", EvaluateCourse[0].TeacherName);
localStorage.setItem("CourseID", EvaluateCourse[0].CourseID);
localStorage.setItem("TeacherID", EvaluateCourse[0].TeacherID);
localStorage.setItem("CourseName", EvaluateCourse[0].CourseName);
localStorage.setItem("CourseType",EvaluateCourse[0].CourseType);
$state.go("studentEvaluate");
};
}
页面 A 的 HTML 结构
<ion-content class="has-header item-text-wrap" overflow-scroll='false' on-swipe-left="onSwipeLeft(EvaluateCourse)" on-swipe-right="onSwipeRight()">
<ion-list >
<div class="item item-icon-left item-icon-right" ng-repeat="item in EvaluateCourse" ng-click="gotoStudentEvaluate(item)">
<!--ng-click="gotoStudentEvaluate(item)"-->
<div >
<i class="icon ion-record " ng-style="{ color: color({{$index}}) }" style="font-size: 320%">
<div style="font-size:45% ;font-weight:bold;position: relative;left: -42%;color:#FFFFFF">
{{item.TeacherName|limitTo:1}}
</div>
</i>
<h2 style="position: relative;left:5%;font-weight:bold;">{{item.CourseName}}</h2>
<i class="ion-android-person" style="position: relative;left:5%;bottom:-3px;color: #AEEEEE"></i>
<p style="position: relative;left:5%;bottom:-2px;display: inline;color: #AAAAAA">{{item.TeacherName}}</p>
</div>
</div>
</div>
<!--内容div-->
</ion-list >
</ion-content > 在页面 B 的 controller.js 中获取存储的值：
$scope.PaperId=localStorage.getItem("PaperId");
$scope.TeacherName=localStorage.getItem("TeacherName");
$scope.CourseID=localStorage.getItem("CourseID");
$scope.TeacherID=localStorage.getItem("TeacherID");
$scope.CourseName="【" +localStorage.getItem("CourseName")+"】"; 在页面 B 上显示获取的数据：
<!-- 课程教师显示 -->
<h1 class="title" style="font-weight:bold;" ng-cloak>{{CourseName}} <span ng-bind="TeacherName"></span> 总结
总结：
近期接触的技术多为新事物，难以仅凭既有经验解决，需借助网络搜索资料。随后通过模仿实践，将之前学到的理论知识应用于实际开发中。希望对读者的学习有所帮助，也欢迎大家支持本站。
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53