Local Storage is implemented under the ionic framework of AngularJS, and angularjsionic

Local Storage is implemented under the ionic framework of AngularJS, and angularjsionic

Preface:

Our front-end uses ionic + AngularJS, and uses hybrid mobile applications. Recently, When I slide over page A, I jump to page B and page B needs to load the data of page A. How can I transfer the value of this page? LocalStorage is used for local storage.

 

Ionic

Ionic is currently the most promising HTML5 mobile app development framework. Using SASS to build applications, he provides many UI controls to help developers develop powerful applications. Angularjs can enhance the ionic application experience. The Code is also very simple. Angularjs can provide two-way data binding and use it to become a common choice for Web and mobile developers.

Angularjs

AngularJS is based on JavaScript, which is one of the most widely used and flexible programming languages in the world. AngularJS can provide users with a complete set of software packages for front-end applications. For Web developers, AngularJS packs all the complexity elements in the form of a framework to ensure that users only need to directly access the most easily implemented functions. For more information, see my previous blog.

Store data on the client (localStorage & sessionStorage)

Html5 provides two new methods to store data on the client:

1. LocalStorage-data storage with no time limit
2. SessionStorage-data storage for a session

Previously, these are all completed by cookies. However, cookies are not suitable for storing a large amount of data because they are transmitted by each request to the server, which makes the cookie speed slow and inefficient. In HTML5, data is transmitted not by each server request, but only by the request. It makes it possible to store a large amount of data without affecting the website performance. For different websites, data is stored in different regions, and a website can only access its own data.

LocalStorage Local Storage

Compared with the local storage solution, localStorage has its own advantages: large capacity, easy-to-use, powerful, and native support. The disadvantage is that it has poor compatibility (chrome, safari, firefox, IE 9, IE8 supports localStorage, which is not supported by IE8 or earlier versions. The security is also poor (therefore, do not use localStorage to store sensitive information ). The data stored by localStorage is generally permanently saved. That is to say, as long as the information is saved by localstorage, the data is stored on the user's client. Data exists even if the user closes the current web browser and restarts. The data lifecycle ends only when the user or program explicitly deletes the data. In terms of security, localstorage is domain-safe, that is, localstorage is domain-based. All pages in the domain can access localstorage data.

LocalStorage:

1. LocalStorage. getItem (key): Get the value of the local storage of the specified key
2. LocalStorage. setItem (key, value): store the value to the key field
3. LocalStorage. removeItem (key): deletes the value of the local storage of the specified key.
4. LocalStorage. length is the number of projects in localStorage.

Project Practice:

EvaluationTaskCtrl controller. js

/* Log on to the controller */. controller ('evaluationtaskctrl ', function ($ scope, $ state, evaluationTaskService, studentEvaluateService) {// slide right to the volume subinterface-zzzzzzzz $ 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 ");};}

Page 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-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> 

Obtain the value in controller. js of page B:
$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")+"】"; 
On page B, the following figure is displayed:

<! -- Course instructor display --> 

Summary:

Recent contacts cannot be solved by experience, because it is a new thing and can only be Baidu. Later, I could write and write on my own, and the theoretical knowledge I learned was actually used. I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers more.