javascript - 使用 LocalStorage 和 AngularJS 重新思考数据结构

Question

我使用 LocalStorage 构建了一个应用程序。

它在一个键下存储了大量的对象，我最近发现这是 DOM 被阻止的原因，因为应用程序必须在每次我读取或读取时进行 JSON 解析/字符串化并存储/检索整个列表写入“数据库”。

引用answer from another question :

Since both LocalStorage and JSON stringify/parse happen synchronously on the main thread, it can block DOM rendering and will thus slow down your app.

数据插入如下所示:

$scope.recordlist = extractRecordJSONFromLocalStorage();
$scope.addRecord = function () {
    $scope.recordlist.push(
            {
                date: $scope.dateJson, 
                time: $scope.time, 
                car: $scope.carList.code, 
                driver: $scope.driverList.name,
                from: $scope.locationList.place,
                destination: $scope.locationList2.place, 
                pax: $scope.paxList,
                comments: [],
                arrival: '',
                inserted: '',
                cancelled:'',
                duration:''
            }
        );
    jsonToRecordLocalStorage($scope.recordlist);
};

既然如此，我需要重新思考我存储和阅读它的整个方式。

这种做法对我来说很有意义，因为我使用 AngularJS 来读取、过滤和比较存储在这个单一键中的对象。

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search )" 
     ng-hide="is.cancelled && (!record.cancelled || record.cancelled === '') || has.comment && (!record.comment || record.comment === '')" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}" 
     ng-hide="!record.arrival && !record.cancelled" 
     ng-show="record.cancelled">

有关如何迁移此内容、迁移到哪个系统以及原因的任何提示？

我想保留 AngularJS 功能。那么如果我不是每次都读取整个文件，如何过滤记录呢？

您可以看到 working example of the app here .

我意识到我缺少关于数据存储和读取方式的关键概念。除了直接答案之外，任何指向有关该问题的文档/理论的提示也将受到高度赞赏。

Answer 1

一项改进可能是用自定义过滤器替换 ng-show 和 ng-hide 指令来显示数据。

angular.module('myapp', []).filter('showhide', function() {

    return function(record, isCancelled) {

        var hide1 = isCancelled && (!record.cancelled || record.cancelled === '') || has.comment && (!record.comment || record.comment === '');

        var hide2 = !record.arrival && !record.cancelled;

        return !hide1 && !hide2;
    };
});

并称其为

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search | showhide:is.cancelled )" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}">

这取决于要加载到 JavaScript 变量中并由脚本过滤的所有数据。我假设您的数据不太大，因为这会导致问题，例如列表中的对象不超过 10000 个。 DOM 性能更多的是关于真正渲染了多少项。每个 ng-hide 元素实际上都会被渲染，然后它将再次从列表中删除。

然后，您必须将此列表存储在变量中的某个位置，该变量只能读取一次，并且只能将更新写入本地存储对象。您可以通过使用保存您的数据的服务来执行此操作。

angular.module('myapp', []).service('dataService', function() {

    var data = ... // get from localStorage
    return {
        get: data,
        save: function(){
            // put the variable 'data' to localStorage
        }
    }
}

然后在你的 Controller 中执行

angular.module('myapp').controller('myCtrl', function($scope, dataService){
    $scope.recordList = dataService.get();
});

从那里开始，您可以修改数组而无需再次读取它，如果您对数组进行了任何更新，您可以在 dataService 对象上调用 save() 。

另一种选择是使用 pouchdb 或 dexie.js 之类的东西，并创建一个获取所有过滤器设置并直接查询数据库的服务。如果您想将数据同步到 couchdb 实例，pouchdb 是很好的选择。如果您只想将数据存储在客户端，dexie.js 可能会更容易。

但我认为本地存储解决方案的发展速度不会太快。