Ionic AngularJS LocalStorage 页面传值教程

前言与需求背景

前言：

当前项目采用 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>

总结

总结：

近期接触的技术多为新事物，难以仅凭既有经验解决，需借助网络搜索资料。随后通过模仿实践，将之前学到的理论知识应用于实际开发中。希望对读者的学习有所帮助，也欢迎大家支持本站。

Ionic + AngularJS 实现页面间数据传递：LocalStorage 本地存储实战

前言与需求背景

Ionic 与 AngularJS 框架介绍

HTML5 客户端数据存储机制

LocalStorage 特性与使用方法

Ionic 页面间数据传递实战

总结

实用工具推荐