如何將對象數組存儲在localStorage中？

我有3個單選按鈕說x,y和z。在click上x，數據加載等..如何將對象數組存儲在localStorage中？

現在在本地存儲，我想爲x，y和z設置不同的數據，並得到它。

在這裏，我給出了一個程序樣本。

的Javascript：

var setInLocalStorage = function(){ 
    //on click of x radio and getting data from model and called 
    // from one function 
    var x = { 
     t = model.x.t; 
     d = model.x.d; 
    } 
    localStorage.setItem('x' ,JSON.stringyfy(x)); 
} 

var getFromLocalStorage = function() { 
    var obj = JSON.parse(localStorage.getItem('x')); 
    //storing back to model 
    model.x.t = obj.t; 
    model.x.d = obj.d; 
    // populating data on screen which was stored in local storage 
    $scope.x.t = model.x.t ; 
    $scope.x.d = model.x.d; 
}

如何存儲的y和z數據和應切換到單選按鈕顯示在屏幕上？

來源

2017-08-01 P J

嘗試使用[角本地存儲（https://github.com/grevory/angular-local-storage）代替'localStorage' – Maher

JSON.stringyfy？應該是JSON.stringify – Fetrarij

爲什麼你不使用'角度服務「呢？ –

您應該使用JSON.stringify和JSON.parse。你的代碼有錯字，你不需要設置每個屬性。只需在範圍上設置x即可。

var setInLocalStorage = function(){ 
    var x = model.x 
    localStorage.setItem('x', JSON.stringify(x)); 
} 

var getFromLocalStorage = function() { 
    var obj = JSON.parse(localStorage.getItem('x')); 
    model.x = obj; 
    $scope.x = model.x; 
}

但最好的做法是不要在控制器中執行這些類型的操作。您應該爲此使用angular.factory或angular.service。

在你的X-storage.js

angular.factory('xStorage', function(){ 
var x = localStorage.getItem('x') || {}; 
return { 
    getX: function(){ 
    return x; 
    }, 
    setX: function(xData){ 
    x = xData; 
    localStorage.setItem('x', xData); 
    } 
} 
})

在你controller.js

angular.controller('controllerName', function(xStorage){ 
$scope.x = xStorage.getX(); 

$scope.clickButton = function(anyValue) { 
    xStorage.setX(anyValue); 
} 
})

來源

2017-08-01 05:54:53

這沒有奏效，當我點擊其他單選按鈕，我沒有得到該電臺保存的數據。 –

@PJ您應該使用angular.watch並在更改時設置該值。 –

可以使用的setObject（）：

import { Component, OnInit } from '@angular/core'; 

import { CoolLocalStorage } from 'angular2-cool-storage'; 

@Component({ 
    selector: 'my-app' 
}) 
export class AppComponent implements OnInit { 
    localStorage: CoolLocalStorage; 

    constructor(localStorage: CoolLocalStorage) { 
     this.localStorage = localStorage; 
    } 

    ngOnInit() { 
     this.localStorage.setItem('itemKey', 'itemValue'); 

     console.log(this.localStorage.getItem('itemKey')); 

     this.localStorage.setObject('itemKey', { 
      someObject: 3 
     }); 

     console.log(this.localStorage.getObject('itemKey')); 
    } 
}

瞭解更多詳情：

https://www.npmjs.com/package/angular2-cool-storage

來源

2017-08-01 05:55:14

Op正在使用AngularJS。 –

如何將對象數組存儲在localStorage中？

回答

相關問題