Pergunta

As I'm writing my first AngularJS app, I'm faced with a requirement to create a data entry functionality, which will work in offline mode. At this point, local storage is more of a general description (to me) rather then a specific way of handling things. My question is: what is a solid technique/method/api of storing many related records on the browser storage, which would feel the closets to interacting with a database?

Foi útil?

Solução 3

After looking around, it appears, that using indexed is the best option. I found these (top 2 items) ready examples of how to do this with angular:
https://github.com/search?q=angular+indexeddb&ref=cmdform

Outras dicas

At this point, local storage is more of a general description (to me) rather then a specific way of handling things.

Local Storage is really an API and should be that way. Thanks to Mozilla's localForge, it really is just an API.

From the project's description:

Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

Looks for IndexDB, and then falls back to WebSQL and then to localStorage if indeed necessary.

However, if you are looking at filtering/sorting kind of database functionality, breezejs.com looks quite good.

HTML5 Local Storage is very easy to work with, but keep in mind that would only store data specific to that individual browser and would never allow you to replace a backend database that can store data aggregated from multiple clients.

This is really only a key-value store though, so if you are looking for relational database type of functionality, you are not going to get that.

Also, this would not be backwardly compatible with older browsers that don't support the feature.

Here is a good introduction to HTML5 local storage: http://diveintohtml5.info/storage.html

This is a ToDo simple application using local storage base on AngularJS: http://jsfiddle.net/JayData/BMthf/

function TodoCtrl($scope) {
    $scope.todos = [];

    var Todo = $data.define("Todo", {
        task: String,
        done: Boolean
    });

    Todo.readAll().then(function (todos) {
        $scope.$apply(function () {
            $scope.todos = todos;
        });
    });

    $scope.addNew = function () {
        Todo.save($scope.newTodo).then(function (todo) {
            $scope.$apply(function () {
                $scope.newTodo = null;
                $scope.todos.push(todo);
            });
        });
    };
}

Tarek

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top