如何在 Angular js 中存储和检索数据?
Posted
技术标签:
【中文标题】如何在 Angular js 中存储和检索数据?【英文标题】:how to store and retrieve data in angular js? 【发布时间】:2014-09-25 12:00:19 【问题描述】:你能告诉我如何永久存储数据(例如本地存储)和检索数据。我想存储数据以便再次获取。我正在做客户端编程?我谷歌它说有persistance.js会这样做..我们可以使用它吗?我试图做一个简单的例子来存储数据但不能这样做。我想保存学生和班级姓名的列表。 这是我的笨蛋:http://plnkr.co/edit/cLTIJfETGYENQyEdsu94?p=preview
// Code goes here
var app = angular.module('appstart', ['ngRoute']);
app.config(function($routeProvider)
// $locationProvider.html5Mode(true);
$routeProvider
.when('/home',
templateUrl: 'tem.html',
controller: 'ctrl'
)
.otherwise(
redirectTo: '/home'
);
);
app.controller("ctrl", function($scope)
$scope.students = [];
$scope.add = function()
$scope.students.push(
inputName : angular.copy($scope.inputName),
inputclass : angular.copy($scope.inputclass)
);
$scope.inputclass='';
$scope.inputName='';
);
谢谢
【问题讨论】:
Angular 与否,原理是一样的:diveintohtml5.info/storage.html @Shomz 感谢更新 ..你能检查我的 plunker 吗?只添加一个条目。剩下的我想我会自己做的。我只想添加它添加到数据库中 您使用的是什么类型的数据库? 我正在使用客户端语言、jquery、angular.js、HTML5 制作桌面应用程序 我只需要添加、删除、编辑条目需要哪种类型的 dB 角度支持 【参考方案1】:您可以在此处获取 angular-local-storage:https://github.com/grevory/angular-local-storage
这使得使用浏览器本地存储变得很容易,我已经用一个使用示例更新了你的 plunker:http://plnkr.co/edit/W06UnVysGx0FMVnITMZD
app.controller("ctrl", ['$scope','localStorageService', function($scope, localStorageService)
$scope.students = [];
$scope.add = function()
$scope.students.push(
inputName : angular.copy($scope.inputName),
inputclass : angular.copy($scope.inputclass)
);
$scope.inputclass='';
$scope.inputName='';
$scope.loadFromStorage = function()
$scope.students = localStorageService.get('studentsList');
if($scope.students == null)
$scope.students = [];
$scope.saveToStorage = function()
localStorageService.set('studentsList', $scope.students);
]);
请记住,这不会在网络上保留您的数据,如果您想这样做,您应该设置一个网络服务器,您可以从中发布和获取数据。 希望对您有所帮助。
【讨论】:
谢谢...你使用 localstorage ..我不想使用它。我想创建表 在该表中,我将给出列名:"id" ,"name","classname" 哦,在这种情况下,您必须在网络服务器中设置端点,这样您就可以使用 $http 服务来发布和获取数据。网络服务器负责将数据存储在数据库中,Angular 本身无法做到这一点。 我们不能创建表..但是有人告诉我使用 websql 可能是我们可以创建.or sqlite 嗯,我对 WebSql 没有完全的了解,但是通过快速研究我发现它也使用 localstorage,而且它似乎已停产:csimms.botonomy.com/2011/05/…【参考方案2】:通常你有很多选择来保持数据的持久性和存储它,我知道的那些:
1 - localStorage or sessionStorage or IndexedDB
2 - cookie if your data is < 4kb (cookie max size)
3 - server side (mysql, redis, mongo and noSQL,json or other extension files etc)
4 - client side (json file or whatever file format you want/can develop)
显然,其中一些功能并不总是得到支持,请在此处查看您更愿意支持或不支持的功能caniuse.com
只需选择一个适合您的需求并创建一个 dataFactory 来存储、删除、检索数据:)
【讨论】:
【参考方案3】:您需要一个数据库。网络存储仅用于临时存储。
如果您有后端,则可以使用服务和$http
创建 CRUD 应用程序。
您使用 Angular 将数据发送到执行持久性的后端。
【讨论】:
以上是关于如何在 Angular js 中存储和检索数据?的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular JS 中检索 Iframe 内的数据绑定值
使用 Angular 7 从 Firebase 存储中检索图像