LocalStorage: obtenir chaque valeur de chaque touche

Question

Je veux parcourir toutes les clés et obtenir la valeur name de chaque touche. Voici à quoi ressemble mon LocalStorage.

key: 3 Value: {"name":"Kevin","country":"Canada","about":"Test","image":""}

key: 4 Value: {"name":"Homer","country":"Canada","about":"Test","image":""}

Je veux obtenir le nom de ces noms et les ajouter à mon tableau. Je l'ai essayé avec cette méthode:

for(var key in localStorage){ 
    let user = JSON.parse(localStorage.getItem(key)); 
    this.users.push(user); 
} 

erreur que je reçois est:

SyntaxError: Unexpected token e in JSON at position 1

Answer 1

quand vous dites Je veux getboth de ces noms, je ne comprends pas, mais de toute façon vous pouvez essayer quelque chose comme:

var keys = Object.keys(localStorage); 
for(var i=0;i<keys.length;i++){ 
    var key = keys[i]; 
    console.log(key, localStorage[key]); 
    //store here "both names" where you want them 
    //you can also access each element with localStorage[key].name, localStorage[key].country, etc. 
} 

Answer 2

je parviens à le résoudre, était une simple erreur en initialisant toujours une nouvelle let user dans la boucle.

J'ai déplacé le user et le reste du code fonctionne.

user: any; 

    getUsers():void{ 
    for(var key in localStorage){ 
     this.user = JSON.parse(localStorage.getItem(key)); 
     this.users.push(this.user); 
    } 
    } 

Answer 3

var keys = Object.keys(localStorage); 
keys.forEach(key=>{ 
    var json_str =localStorage.getItem(key) 
    try { 
     var abc = JSON.parse(json_str); 
     this.user = abc; 
    } catch (e) { 
    console.log(e) 
    } 
}) 

Answer 4

C'est un raffinement de Robert's answer.

Il suffit d'énumérer toutes les valeurs (les clés elles-mêmes n'ont pas d'importance) dans localStorage qui ont une propriété name qui est une chaîne. Retournez ensuite ce tableau. En fonction de votre propre réponse, vous avez probablement un état mutable incohérent car le déplacement de votre variable temporaire vers la portée de l'instance ne devrait pas avoir d'impact sur votre situation.

function getUsers() { 
    return Object.values(localStorage) 
    .map(json => { 
     try { 
     return JSON.parse(json); 
     } 
     catch (e) { 
     return undefined; 
     } 
    }) 
    .filter((user?: any): user is {name: string} => user && typeof user.name === 'string'); 
} 

const users = getUsers(); 

Answer 5

Vous pouvez envisager d'utiliser ma bibliothèque ngx-store pour traiter localStorage, sessionStorage, des biscuits et un peu plus anguleux. Pour obtenir ce que vous voulez, vous serez en mesure de stocker tableau entier dans le stockage ou tout simplement utiliser le code comme ci-dessous avec votre structure de données actuelle:

import { LocalStorageService } from 'ngx-store'; 

export class Example { 
    public users: Array<any> = []; 

    constructor(public localStorageService: LocalStorageService) { 
    this.localStorageService.utility.forEach((value, key) => this.users.push(value)); 
    } 
} 

Vraiment, il peut être tout aussi simple que cela;)

Answer 6

Vous pouvez utiliser la méthode hasOwnProperty('propertyName') pour vérifier le nom disponible ou non dans l'objet. Ensuite, effectuez l'opération que vous voulez.

let localStorage = { 
 
    "key1": {"name":"Kevin","country":"Canada","about":"Test","image":""}, 
 
    "key2": {"name":"Homer","country":"Canada","about":"Test","image":""} 
 
} 
 
for(let key of Object.keys(localStorage)){ 
 
    if(localStorage[key].hasOwnProperty('name')){ 
 
     console.log(localStorage[key]['name']); 
 
    } 
 
}