个人中心
gpt4 book ai didi

AngularJs:在本地存储中存储和检索数据

转载 作者：行者123 更新时间：2023-12-02 05:48:07 26 4
gpt4 key购买 nike

我是 Angular 的新手。早些时候我使用的是 Javascript，但现在我正在学习 AngularJs。当前使用的版本是1.3.2。

问题是我正在尝试使用本地存储。

在 Javascript 中，我们使用类似这样的东西:

localStorage.pic = data.pic;
localStorage.id = data.uid;
localStorage.name = data.name;

AngularJs中有类似的东西吗？

感谢您的建议。

最佳答案

使用ngStorage也是一样，

添加 ngStorage 引用并将其作为依赖项注入(inject)到您的 Angular 应用程序中，

<script type="text/javascript" src='https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js'></script>

angular.module('gameApp', ['ngStorage'])

然后你可以像这样存储和检索，

 $localStorage.pic= $scope.pic;

演示

angular.module('gameApp', ['ngStorage', 'ui.bootstrap'])
  .controller('MainCtrl', ['$scope', '$localStorage', function ($scope, $localStorage) {

    // Set a total score variable equal to zero
    $scope.total = 0;

    // NOTE: use d3.js for data visualization in widget

    var gameData = [
      {
        "level": "Level One",
        "points": 30,
        "max": 100,
        "completed": false
      },
      {
        "level": "Level Two",
        "points": 50,
        "max": 100,
        "completed": false   
      }
    ];

    // tie the game JSON to the view
    $scope.gameData = gameData; 
    
    // tie the view to ngModule which saves the JSON to localStorage
    $localStorage.gameData = gameData;

    // loop through the gameData and sum all the values where the key = 'points'



    console.log("Your current score is: " + $scope.total)
    $localStorage.total = $scope.total;

    $scope.addToLevel = function(level, num){
       $scope.levelPoints = gameData[level].points += num;
       console.log("You have " + $scope.levelPoints + " points in Level");
    }


    // create a function that loops the json to check if the points >= max 
      // and if so
        // then change completed to true
   
    $scope.calcTotal = function(){
        for (var i in $scope.gameData){
          var level = $scope.gameData[i];
          $scope.total += level.points;
      }
      $localStorage.total = $scope.total;
    };


    $scope.calcTotal();



  }])
<!DOCTYPE html>
<html ng-app='gameApp'>

<head>
  <meta charset="utf-8" />
  <title>Angular Local storage</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
  <script type="text/javascript" src='https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js'></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>

  <script type="text/javascript" src='script.js'></script>


</head>

<body ng-controller='MainCtrl'>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Angular JS Local Storage</a>
      </div>
    </div>
   
  </nav>


  <div class='container'>
    <div class='row' style='margin-top:100px'>
      <button class='btn btn-primary' ng-click="addToLevel(0, 20); calcTotal();">+20 Points Lvl 1</button>
      <br>

      <table class='table table-hover'>
        <thead>
          <tr>
            <td>Level</td>
            <td>Points</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='data in gameData'>
            <td>{{ data.level }}</td>
            <td>{{ data.points }}</td>
          </tr>
          <tr>
            <td>Total Points</td>
            <td>{{total}}</td>
          </tr>
        </tbody>
      </table>


    </div>
  </div>


</body>

</html>

关于AngularJs:在本地存储中存储和检索数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41663686/

26 4 0
文章推荐： prolog - 控制 Prolog 变量值选择
文章推荐： app-store - 无法在App Store中创建下一个版本号序列
文章推荐： function - 如何创建一个接受具有特定参数的函数作为参数的函数？
文章推荐： ember.js - Ember 屈折词和带有两个词名称的西类牙语复数形式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com