HTML 5 localStorage 기능 을 이용 한 todo 응용 프로그램 (angularJs + Bootstrap)

오늘 인터넷 에서 간단 한 todo 응용 프로그램 을 보 았 습 니 다. angularJs 를 사용 하여 전단 데이터 바 인 딩 을 하고 localstorage 를 이용 하여 데 이 터 를 저장 하 는 것 이 재 미 있 습 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html ng-app="todoApp">

  <head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

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

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>

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

<style>

  .center-grey{

 background:#f2f2f2;

 margin-top:20;

  }

  .top-buffer {

  margin-top:20px; 

  }

  button{

  display: block; 

  width: 100%;

  }

</style>

<title>Angular Todo Note App</title>

  </head>

  <body>

<div class="container center-grey" ng-controller="TodoController">

  <div class="row top-buffer" >

<span class="col-md-3"></span>

<span class="col-md-5">

  <input class="form-control" type="text" ng-model="note" placeholder="Add a note here"/> 

</span>

<span class="col-md-1">

  <button ng-click="createNote()" class="btn btn-success">Add</button>

</span>

<span class="col-md-3"></span>

  </div>

  <div class="row top-buffer" >

<span class="col-md-3"></span>

<span class="col-md-6">

  <ul class="list-group">

<li ng-repeat="note in notes track by $index" class="list-group-item">

  <span>{{note}}</span>

</li>

  </ul>

</span>

<span class="col-md-3"></span>

  </div>

</div>

  </body>

</html>

ng - app 는 todoApp 을 모델 로 사용 하 겠 다 고 밝 혔 다.
컨트롤 러
ng - model = "note" 는 입력 상자 input 에 데 이 터 를 연결 하여 $scope. note 에 연결 하 였 습 니 다.
ng - click = "createNote" 는 함수 (대상) 를 연결 하여 $scope. createNote = function () {...} 에 연결 하 였 습 니 다.
ng - repat = "note in notes track by $index" 및 {{note}} 낯 이 익 지 않 습 니까?
다음은 todoApp 의 js 콜 딩, controller 'odoController' 가 $scope 와 notes Factory 서 비 스 를 전달 합 니 다.
object. keys 는 localStorage 의 모든 key - value 키 를 옮 겨 다 닙 니 다.

var todoApp = angular.module('todoApp',[]);



todoApp.controller('TodoController',function($scope,notesFactory){

    $scope.notes = notesFactory.get();

    $scope.createNote = function(){

        notesFactory.put($scope.note);

        $scope.note='';

        $scope.notes = notesFactory.get();

    }

});



todoApp.factory('notesFactory',function(){

    return {

    put: function(note){    

        localStorage.setItem('todo' + (Object.keys(localStorage).length + 1), note);

    },

    get: function(){

        var notes = [];

        var keys = Object.keys(localStorage);

        for(var i = 0; i < keys.length; i++){

            notes.push(localStorage.getItem(keys[i]));

        }

        return notes;

    }       

    };

})

BTW, Firefox 개발 자 도 구 를 통 해 현재 페이지 를 삭제 한 localStorage 내용 을 볼 수 있 습 니 다. 구체 적 인 방법 은 여 기 를 세 게 찌 르 세 요.
마지막 으로 하고 싶 은 말 은 angularJS 가 정말 좋 은 물건 이에 요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

localStorage에서 반영구 저장하는 방법

웹 브라우저 기능의 localStrage에 대한 것입니다. 먼저 localStrange를 무엇인지 살펴 보겠습니다. 보기는 chrome 검증 도구 → 응용 프로그램 → localStrage → 파일에서 볼 수 있습니...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

HTML 5 localStorage 기능 을 이용 한 todo 응용 프로그램 (angularJs + Bootstrap)

좋은 웹페이지 즐겨찾기