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 = {}; 

Update: Позвольте мне добавить больше к этому вопросу. Таким образом, я получил его работу, вроде, я могу успешно сохранить свой «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, который упрощает использование локального хранилища - в основном вы можете привязать свои данные к элементу localstorage.

https://github.com/gsklee/ngStorage

Answer 3

UI TinyMCE является основой для редактирования текста в браузерах, в то время как локальное хранилище представляет собой решение для временного хранения данных ... Они не сопоставимы. Вы можете использовать UI Tinymce для редактирования, а затем локальное хранилище для сохранения данных из UI Tinymce, которые могут работать. Хотя вам следует предупредить, что использование локального хранилища (или любого клиентского решения для хранения данных) работает только до тех пор, пока использование не очистит их кеш браузера/файлы cookie/хранилище. Если вы планируете создавать веб-приложение, лучшим решением будет хранение данных в индексированной базе данных на сервере, обслуживающем ваше приложение. Таким образом, пользователь не может случайно удалить свои данные. Вы даже можете использовать UI Tinymce.