angular服务2

来源：互联网发布：mac cocos 环境搭建编辑：程序博客网时间：2024/05/29 14:41

AngularJS 与本地存储 LocalStorage 应用实例

这篇文章是一个关于AngularJS 与本地存储 LocalStorage 配合使用的一个应用实例，里面涉及到的东西也不少，但关键是它们都很简单，你可以不费吹灰之力就能把它人拿下，不信，你试试！废话不多说，直接上代码。你也可以先去品尝一下 AngularJS 与本地存储 LocalStorage 应用实例 Demo：http://yunkus.com/demo/angularjs/localstorage/。戴好安全带，网速有点快。

HTML代码

<!DOCTYPE html>
<html ng-app="yk">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>angularJS 本地存储 localStorage.setItem() | localStorage.getItem()</title>
    <link rel="stylesheet" href="../../lib/bootstrap.min.css">
    <script type="text/javascript" src="../../lib/angular.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div class="container">
<div class="panel panel-default">
  <div class="panel-heading text-center">
      <!-- 从JS里获取默认的数据 并放到本地存储 localStorage中 -->
    <button class="btn btn-info" ng-click="setLocalStorage()">设置数据</button>
    <!-- 从 localStorage 中获取刚存入的数据 -->
    <button class="btn btn-info" ng-click="getDataLocalStorage()">读取数据</button>
    <!-- 修改数据 点页面中的保存按钮，再次保存到 localStorage 中-->
    <button class="btn btn-info" ng-click="modifyLocalStorage()">修改数据</button>
    <!-- 从localStorage中清空一条数据 -->
    <button class="btn btn-info" ng-click="removeLocalStorage()">删除一条数据</button>
    <!-- 清空整个localStorage  -->
    <button class="btn btn-info" ng-click="clearLocalStorage()">清空数据</button>
  </div>
  <div class="panel-body">
    <!-- 开始默认显示内容 -->
    <div ng-if="beginHere">
        开始 LocalStorage 之旅前，LocalStorage 里什么都没有，你可以依次点 F12 ，切换到 Resources 面板里的 Local Storage 页签查看数据情况。所以现在你只需要点击设置数据就可以把默认的数据存储到 LocalStorage    里了。
    </div>
    <div ng-if="!beginHere">
        <!-- message END-->
        <div class="message">
        <div ng-if="setFlag">
            <p>恭喜，localStorage 数据设置成功！你可以依次点 F12 ，切换到Resources面板里的 Local Storage 页签查看数据情况</p>
        </div>
        <div ng-if="getFlag || modifyFlag || removeFlag">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>城市</td>
                    <td>对应值</td>
                    <td>国家</td>
                    <td ng-if="removeFlag">操作</td>
                </tr>    
                </thead>
                <tbody>
                    <tr ng-repeat="v in getData">
                        <td><input class="form-control" type="text" ng-model="$index" ng-disabled="chmod"></td>
                        <td><input class="form-control" type="text" ng-model="v.person" ng-disabled="chmod"></td>
                        <td><input class="form-control" type="text" ng-model="v.city" ng-disabled="chmod"></td>
                        <td><input class="form-control" type="text" ng-model="v.value" ng-disabled="chmod"></td>
                        <td><input class="form-control" type="text" ng-model="v.country" ng-disabled="chmod"></td>
                        <td ng-if="removeFlag"><button class="btn btn-danger" ng-click="removeItemLocalStorage($index)">删除</button></td>
                    </tr>
                    <tr ng-if="modifyFlag || removeFlag">
                        <td colspan="4" ng-if="modifyFlag"></td>
                        <td colspan="5" ng-if="removeFlag"></td>
                        <td ng-class="{'text-right':modifyFlag}">
                            <button class="btn btn-success" ng-click="saveLocalStorage()" ng-if="modifyFlag">提交</button>
                            <button class="btn btn-success" ng-click="saveItemLocalStorage()" ng-if="removeFlag">提交</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div ng-if="saveSuccess">
            <p>恭喜，localStorage 数据修改成功！你可以依次点 F12 ，切换到Resources面板里的 Local Storage 页签查看数据情况</p>
        </div>
        <div ng-if="clearFlag">
            <p>恭喜，localStorage 数据清空成功！你可以依次点 F12 ，切换到Resources面板里的 Local Storage 页签查看数据情况</p>
        </div>
        </div>
        <!-- message END-->
  </div>
</div>
</div>
</div>
</div>
</body>
</html>

JavaScript 代码

var m = angular.module("yk",[]);
m.controller("ctrl",["$scope",function($scope){
 $scope.dataArray = [
    {person:"大明",city:"珠海",value:"zhuhai",country:"China"},
    {person:"大黑",city:"广州",value:"guangzhou",country:"China"},
    {person:"大白",city:"深圳",value:"shenzhen",country:"China"},
    {person:"大红",city:"韶关",value:"shaoguan",country:"China"},
    {person:"大树",city:"Alaska",value:"alaska",country:"America"},
    {person:"大头",city:"New York",value:"newyork",country:"America"},
    {person:"大风",city:"Washington",value:"washington",country:"America"},
    {person:"大浪",city:"California",value:"california",country:"America"}
];
  $scope.beginHere = true;
  // 修改一条或者多条数据后的保存按钮处理函数
  $scope.saveLocalStorage = function(){
     localStorage.clear();
     localStorage.setItem("data",angular.toJson($scope.getData));
  }
  // 把 $scope.dataArray 的数据存放到 LocalStorage中
  $scope.setLocalStorage = function(){
      $scope.beginHere = false;
      $scope.setFlag = true;
      $scope.getFlag = false;
      $scope.modifyFlag = false;
      $scope.clearFlag = false;
      $scope.removeFlag = false;
      $scope.saveSuccess = false;
      localStorage.setItem("data",angular.toJson($scope.dataArray));
  }
  //从 LocalStorage 里取数据
  $scope.getDataLocalStorage = function(){
      if(localStorage.length == 0){
         alert("请先点击 {设置数据} 按钮");
     }else{
         $scope.beginHere = false;
          $scope.setFlag = false;
          $scope.getFlag = true;
          $scope.chmod = true;
          $scope.modifyFlag = false;
          $scope.clearFlag = false;
          $scope.removeFlag = false;
          $scope.saveSuccess = false;
        $scope.getData = angular.fromJson(localStorage.getItem("data"));
     }
  }
  //切换到修改数据页面
  $scope.modifyLocalStorage = function(){
      $scope.hasLocalStorage();
      $scope.beginHere = false;
      $scope.setFlag = false;
      $scope.getFlag = false;
      $scope.chmod= false;
      $scope.modifyFlag = true;
      $scope.clearFlag = false;
      $scope.removeFlag = false;
      $scope.saveSuccess = false;
      $scope.modityResult = localStorage.getItem("data");
  }
  //清空 LocalStorage
  $scope.clearLocalStorage = function(){
      $scope.hasLocalStorage();
      $scope.beginHere = true;
      $scope.setFlag = false;
      $scope.getFlag = false;
      $scope.modifyFlag = false;
      $scope.clearFlag = false;
      $scope.removeFlag = false;
      $scope.saveSuccess = false;
      localStorage.clear();
      console.log(angular.fromJson(localStorage.getItem("data")));
      $scope.getData = angular.fromJson(localStorage.getItem("data"));
  }
  // 切换到删除数据页面
  $scope.removeLocalStorage = function(){
      $scope.hasLocalStorage();
      $scope.beginHere = false;
      $scope.setFlag = false;
      $scope.getFlag = false;
      $scope.modifyFlag = false;
      $scope.clearFlag = false;
      $scope.removeFlag = true;
      $scope.saveSuccess = false;
      $scope.chmod = true;
  }
  // 删除一条数据
  $scope.removeItemLocalStorage = function(index){
      $scope.getData.splice(index,1);
      $scope.saveSuccess = false;
  }
  // 删除一条数据后，保存按钮处理函数
  $scope.saveItemLocalStorage = function(){
      localStorage.setItem("data",angular.toJson($scope.getData));
       $scope.saveSuccess = true;
  }
 // 判断 LocalStorage 是否已经存在
 $scope.hasLocalStorage = function(){
     if(localStorage.length == 0){
         alert("请先点击 {设置数据} 按钮 ");
     }else{
         if($scope.getData == undefined){
             alert("请先点击 {读取数据} 按钮 ");
         }
     }
  }
}]);

这个例子里面的JS 代码有点多，但是主要的代码就那么几行，其余的 ture、false 都是用于判断显示隐藏页面用的。

阅读全文

0 0