Làm cách nào để lưu trữ dữ liệu trong bộ nhớ cục bộ bằng Angularjs?

Hiện tại tôi đang sử dụng một dịch vụ để thực hiện một hành động, cụ thể là lấy dữ liệu từ máy chủ và sau đó lưu trữ dữ liệu trên chính máy chủ đó.

Thay vì điều này, tôi muốn đưa dữ liệu vào bộ nhớ cục bộ thay vì lưu trữ trên máy chủ. Làm thế nào để tôi làm điều này?

đây là một chút mã của tôi lưu trữ và truy xuất vào bộ nhớ cục bộ. tôi sử dụng các sự kiện phát sóng để lưu và khôi phục các giá trị trong mô hình.

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            name: '',
            email: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

Nếu bạn sử dụng $window.localStorage.setItem(key,value)để lưu trữ, $window.localStorage.getItem(key)truy xuất và $window.localStorage.removeItem(key)xóa, thì bạn có thể truy cập các giá trị trong bất kỳ trang nào.

Bạn phải chuyển $windowdịch vụ đến bộ điều khiển. Mặc dù trong JavaScript, windowđối tượng có sẵn trên toàn cầu.

Bằng cách sử dụng $window.localStorage.xxXX()người dùng có quyền kiểm soát localStoragegiá trị. Kích thước của dữ liệu phụ thuộc vào trình duyệt. Nếu bạn chỉ sử dụng $localStoragethì giá trị vẫn duy trì miễn là bạn sử dụng window.location.href để điều hướng đến trang khác và nếu bạn sử dụng <a href="location"></a>để điều hướng đến trang khác thì $localStoragegiá trị của bạn sẽ bị mất trong trang tiếp theo.

Đối với lưu trữ cục bộ, có một mô-đun để xem url bên dưới:

https://github.com/grevory/angular-local-st Storage

và liên kết khác cho bộ nhớ cục bộ HTML5 và angularJs

http://www.amitavroy.com/justread/content/articles/html5-local-st Storage-with-angular-js /

Sử dụng ngStoragecho tất cả các nhu cầu lưu trữ cục bộ AngularJS của bạn. Xin lưu ý rằng đây KHÔNG phải là một phần nguyên gốc của khung công tác Angular JS.

ngStorage chứa hai dịch vụ $localStoragevà$sessionStorage

angular.module('app', [
   'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

Kiểm tra bản demo

Có một mô-đun thay thế có nhiều hoạt động hơn ngStorage

angular-local-Storage:

https://github.com/grevory/angular-local-st Storage

Bạn có thể dùng localStorage cho mục đích này.

Các bước:

1. thêm ngStorage.min.js trong tệp của bạn
2. thêm phụ thuộc ngStorage trong mô-đun của bạn
3. thêm mô đun $ localStorage trong bộ điều khiển của bạn
4. sử dụng $ localStorage.key = value

Tôi là tác giả (nhưng khác) dịch vụ lưu trữ html5 góc. Tôi muốn giữ các bản cập nhật tự động có thể thực hiện bằng cách ngStorage, nhưng làm cho các chu trình tiêu hóa dễ dự đoán hơn / trực quan hơn (ít nhất là đối với tôi), thêm các sự kiện để xử lý khi yêu cầu tải lại trạng thái và cũng thêm lưu trữ phiên chia sẻ giữa các tab. Tôi đã lập mô hình API sau $resourcevà gọi nó angular-stored-object. Nó có thể được sử dụng như sau:

  angular
    .module('auth', ['yaacovCR.storedObject']);

  angular
    .module('auth')
    .factory('session', session);

  function session(ycr$StoredObject) {
    return new ycr$StoredObject('session');
  }

API ở đây .

Repo ở đây .

Hy vọng nó sẽ giúp được ai đó!

Thực hiện theo các bước để lưu trữ dữ liệu trong Angular - lưu trữ cục bộ:

1. Thêm 'ngStorage.js' trong thư mục của bạn.

2. Tiêm 'ngStorage' trong angular.module của bạn

       eg: angular.module("app", [ 'ngStorage']);

3. Thêm $localStoragevào chức năng app.controll của bạn

4. Bạn có thể sử dụng $localStoragebên trong bộ điều khiển của bạn

Eg: $localstorage.login= true;

Ở trên sẽ lưu trữ cục bộ trong ứng dụng trình duyệt của bạn

Tùy thuộc vào nhu cầu của bạn, như nếu bạn muốn cho phép dữ liệu cuối cùng hết hạn hoặc đặt giới hạn về số lượng bản ghi sẽ lưu trữ, bạn cũng có thể xem https://github.com/jmdobry/angular-cache cho phép bạn xác định nếu bộ đệm nằm trong bộ nhớ, localStorage hoặc sessionStorage.

Chúng ta nên sử dụng tập lệnh của bên thứ ba cho cái gọi là ngStorage ở đây là một ví dụ về cách sử dụng. Nó cập nhật bộ lưu trữ cục bộ với sự thay đổi trong phạm vi / chế độ xem.

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- CDN Link -->
    <!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
    <script src="angular.min.js"></script>
    <script src="ngStorage.min.js"></script>
    <script>
        var app = angular.module('app', ['ngStorage']);
        app.factory("myfactory", function() {
            return {
                data: ["ram", "shyam"]
            };
        })
        app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {

            $scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
            // Delete from Local Storage
            //delete $scope.abcd.counter;
            // delete $localStorage.counter;
            // $localStorage.$reset(); // clear the localstorage
            /* $localStorage.$reset({
                 counter: 42   // reset with default value
             });*/
            // $scope.abcd.mydata=myfactory.data;
        });
    </script>
</head>

<body ng-app="app" ng-controller="Ctrl">

    <button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>

</html>