如何将 JSON 数组存储到本地存储 [重复]答案

【问题标题】：How do I store a JSON array to localstorage [duplicate]如何将 JSON 数组存储到本地存储 [重复]
【发布时间】：2020-09-21 18:51:09
【问题描述】：

{
    "Id": 1,
    "Fullname": "test name",
    "Username": "test",
    "Password": "$2a$10$f.upx2WTxlriul4QK/1GSuCxd6Dmw7.NgVeJ2VfuiC0uIZai5rsD6",
    "PasswordSalt": "$2a$10$uCpbT0wAGFx5NxCwlZOkK.",
    "Enabled": true,
    "Locked": false,
    "Deleted": false,
    "LogonAttempts": 0,
    "LastLogon": null,
    "LastModifiedBy": "Tester",
    "LastModifiedOn": "2020-09-14T16:08:35.853Z",
    "CreatedBy": "Tester",
    "CreatedOn": "2020-09-14T16:08:35.853Z",
    "UserRoles": [
        {
            "Id": 3,
            "Roles": "Admin",
            "RolePermissions": [
                {
                    "Id": 1,
                    "Permission": "Administrator"
                },
                {
                    "Id": 2,
                    "Permission": "Currency"
                }
            ]
        }
    ]
}

我正在尝试将 RolePermisions 和每个 Permission 保存到本地存储，但我不确定如何执行此操作。最好我想在 ngOnInit() 里面做

打字稿

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor( private activatedRoute: ActivatedRoute,) { }
  access_token = null;

  
  ngOnInit() {
    this.access_token = localStorage.getItem('access_token');
  }

}

我希望能够存储 access_token 以及 RolePermision 和每个权限

【问题讨论】：

对 JSON 进行字符串化

标签： javascript angular typescript angular8

【解决方案1】：

您是否特别想保存 RolePermissions 而不是 UserRoles，因为用户只有一个角色？因为如果你想存储多个角色，你应该存储 UserRoles。无论如何只存储 RolePermissions 并假设你总是有一个并且你上面描述的对象存储在一个名为 userdata 的变量中，那就是：

localStorage.RolePermissions = JSON.stringify(userdata.UserRoles[0].RolePermissions);

要检索它，您会这样做：

var permissions = JSON.parse(localStorage.RolePermissions);

【讨论】：

好地方，谢谢，是的，我想存储 UserRoles 最好的方法是什么？
我有一个最后一个问题，很抱歉给您带来麻烦，但是我怎样才能在dashboard.component html页面上显示这个？
存储UserRoles的过程完全相同，只是在第一条语句中使用userdata.UserRoles而不是userdata.UserRoles[0].RolePermissions。至于如何在仪表板页面上显示它 - 您最好使用模板页面中的一些代码将其作为一个单独的问题打开。

【解决方案2】：

存储到localStorage时，需要将数据存储为字符串（因此将权限数据转换为字符串。），从localStorage加载数据时，需要将该字符串转换为数组值。

【讨论】：

const storeThisInLocalStorage = JSON.stringify(someJson);然后 JSON.parse(localStorage.getItem('yourdata'))
是的，没关系。