AngularJS - 如何保存輸入區域的文本？ localStorage的？

Question

所以我給用戶添加一個筆記區域。用戶將能夠輸入任何他們想要的並點擊保存。保存整個頁面的作品，但重置的輸入區域除外。我唯一能想到的其他事情是ui-tinymce或localStorage ??無論哪種方式的任何輸入如何保存和存儲輸入區div？此外，它應該在同一頁上完成，因爲它涉及特定的訂單。每個訂單在其輸入區域都有不同的註釋。

HTML

<div ng-if="'confirmation' != page && editable" class="col-xs-12 col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3>Notes</h3> 
     </div> 
     <div class="panel-body"> 
      <div align="center"> 
       <input placeholder="Notes" ng-model="myNotes.notes" class="notes"> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$scope.myNotes = {}; 

更新：讓我更增加了這個問題。所以我得到了它的工作，有點，我能夠通過郵件成功地保存我的'ui-tiny-mce'。我會在保存'ui-tiny-mce'文本的工作頁面下面發帖。現在的問題是，它保存了文本。然而，每個訂單都有一個'ui-tiny-mce'框，當我保存一個訂單時，它會將相同的數據保存到所有訂單頁面中的所有'ui-tiny-mce'框中。

HTML

<div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Notes <button ng-click="saveNotes()">Save Notes</button></h3> 
      </div> 
      <div class="panel-body"> 
       <div class="form-group"> 
        <textarea ui-tinymce="tinymceOptions2" ng-model="myNotes.notes"></textarea> 
       </div> 
      </div> 
     </div> 

JS控制器

$scope.myNotes = {}; 
    $scope.saveNotes = function() { 
     $http.post('api/settingsController.php/write',$scope.settings).success(function() { 
      toastr.success('Notes Saved'); 
     }); 
    }; 

PHP

$app->post('/write', function(\Symfony\Component\HttpFoundation\Request $request) use ($app) { 
$document = json_decode($request->getContent(), true); 
unset($document['_id']); 

$document['sid'] = $_SESSION['sid']; 
$app['mongoOrders']->update(['sid'=>$_SESSION['sid']], $document, ['upsert'=>true]); 

return $app->json($document);}); 

Answer 1

所以，你有幾種選擇，如果你想保留數據，即使刷新頁面後。

選擇1（良好）：

保存當前筆記，並通過路線訪問它。你要確保ngRoute已添加到您的應用程序的模塊：

angular.module('app', ['ngRoute']); 

，並且您已經添加ngRoute到腳本：

<script src="path/to/angular-route.js"></script> // must be loaded in after angular.js 

https://docs.angularjs.org/api/ngRoute

，然後將路由添加到您的配置中： https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

選項2（好）：

保存筆記作爲字符串化JSON了加的window.localStorage對象。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

這個選項的問題是，它更容易產生陳舊的數據。

選項3（不太好）：

直接追加註到窗口對象。

Answer 2

有一個Angular模塊，ngStorage使它使用本地存儲簡單一點 - 基本上你可以將你的數據綁定到本地存儲元素。

https://github.com/gsklee/ngStorage

Answer 3

UI TinyMCE的是在瀏覽器中編輯文本的框架，而本地存儲臨時數據存儲的解決方案......他們沒有可比性。您可以使用UI Tinymce進行編輯，然後使用本地存儲來保存UI Tinymce的數據，這可以工作。儘管應該預先警告，使用本地存儲（或任何客戶端存​​儲解決方案）只能在清除其瀏覽器緩存/ cookie /存儲之前運行。如果您打算製作Web應用程序，更好的解決方案就是將數據存儲在爲您的應用程序提供服務的服務器上的索引數據庫中。這樣用戶不會意外刪除他們的數據。你甚至可以使用UI Tinymce。