web-dev-qa-db-ja.com

更新後もlocalStorageの値を保持するにはどうすればよいですか？

これは私のコントロールです：

_app.controller('ctrl', function ($window, $scope) {

    $scope.initData = [
        {
            firstName: "John",
            lastName: "Doe",  
        },
        {
            firstName: "Jane",
            lastName: "Doe",
        },
        {
            firstName: "John",
            lastName: "Smith",
        }
    ];

    $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
    $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
    $scope.sortedType = 'firstName';
    $scope.sortedReverse = false;
    //Remove Rows and Update localStorage Key Values
    $scope.removeRow = function(row) {
        $scope.retrievedData.splice(row, 1);
        $scope.initData.splice(row, 1);
        $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
    }
});
_

HTML：

_<table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>
                        <span ng-show="sortedType == 'firstName' && sortedReverse" class="fa fa-long-arrow-up"></span>
                        <span ng-show="sortedType == 'firstName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
                        <span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;">First Name</span>
                    </th>
                    <th>
                        <span ng-show="sortedType == 'lastName' && sortedReverse" class="fa fa-long-arrow-up"></span>
                        <span ng-show="sortedType == 'lastName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
                        <span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;">Last Name</span>
                    </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse">
                <td>{{v.firstName}}</td>
                <td>{{v.lastName}}</td>
                <td>
                    <button class="btn btn-primary">Edit</button>
                    <button class="btn btn-primary" ng-click="removeRow();">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
_

さて、これが何をするのかは明らかです。 _$scope.initData_からlocalStorageにデータを割り当て、それをHTMLに補間します。関数removeRow()はテーブルの行を削除し、localStorageを最新のアクションで更新します。これの問題は、HTMLをリロードするたびに、更新されたデータではなく、最初のlocalStorageデータがロードされることです。これは、ここで割り当てているためです。$window.localStorage.setItem('initData', JSON.stringify($scope.initData));しかし、更新後に更新を維持する方法がわかりません。

お知らせ下さい。

ありがとう。

javascriptjqueryhtmlangularjslocal-storage
4
tholo

行$window.localStorage.setItem('initData', JSON.stringify($scope.initData));は、更新するたびにデータをリセットしています。

この行を次のように置き換えます。

if(!localStorage.getItem('initData')){
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}

さらにあなたはその行をまったく持つべきではありません。空のローカルストレージから開始し、UIからのみ新しいエントリを追加します。

上記のコードは、アプリケーションが初めて実行されるときに、それを1回だけ実行します。

リストが空になるたびにデータを再挿入したい場合は、以下を試してください

if(!localStorage.getItem('initData') || JSON.parse(localStorage.getItem('initData')).length === 0){
    $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
4
BiJ

ページが読み込まれるたびに、新しいinitDataを設定してローカルストレージを更新しています...代わりに、既存のlocalstorageデータを確認し、モックされたinitDataを使用する前にそれを使用する必要があります

2
Chetan

javaScriptを使用してローカルストレージからデータを削除します。エラーなしのコードを次に示します。

削除に関数を使用

       function deleteRow(index){
              dataList.splice(index, 1);
              console.log('====>', dataList)
              localStorage.setItem('items', JSON.stringify(dataList)); 
}
1
Goyani un

ロード時にlocalStorageが空であるかどうかfirstを確認する必要があります

if (localStorage == null) {//setItem() ...};
1
Jonathan

このコードはあなたが理解するのに役立ちます.....

<!DOCTYPE html>
    <html>
    <head>
    <script>
    var ArrayData = [];
    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.count) {
                localStorage.count = Number(localStorage.count)+1;
            } else {
                localStorage.count = 1;
            }
            document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.count;
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
    function load()
    {
        var odser = JSON.parse(localStorage.getItem("data"));
        document.getElementById("result1").innerHTML = odser;
    }
    function fun()
    {
        var odser = JSON.parse(localStorage.getItem("data"));
        ArrayData = odser;
        ArrayData.Push(3);
        var oser = JSON.stringify(ArrayData);
        localStorage.setItem("data", oser);
        var odser = JSON.parse(localStorage.getItem("data"));
        document.getElementById("result1").innerHTML = odser;
    }
    </script>
    </head>
    <body onload="load()">
    <button onclick="clickCounter()" type="button">Click me!</button>
    <button onclick="fun()" type="button">Click me! Array</button>
    <div id="result"></div>
    <div id="result1"></div>
    </body>
    </html>
0
Inamur Rahman

簡単なステップでは、更新するための関数を使用してページを更新する必要があるかどうかが問題になり、私にとって便利で効果的であり、locaStorageの値を設定したままにします。使用したのは以下の関数です。私は

    function load()
{
  console.log("loading")
  setTimeout("window.location.assign('samepage.html');", 1000);

}
0
Israelmikan