删除会话存储角度 8 中的特定元素答案

【问题标题】：Remove a particular element in session storage angular8删除会话存储角度 8 中的特定元素
【发布时间】：2020-03-03 17:29:12
【问题描述】：

我有一个路线列表，即

countryList = ["South","East","West"]

<div *ngFor="let country of countryList">

     <mat-checkbox (change)="checkBoxClicked(country, $event)">
        {{country}}
     </mat-checkbox>
</div>

显示为 mat-checkbox。因此，当用户选择特定方向时，我尝试将其存储在会话存储中

 checkBoxClicked(list, event) {          
        if (event.checked) {
        sessionStorage.setItem("TestingSelectedPages",JSON.stringify({ 'Countries': list}));   

        }
            else {
                   //How to remove the same ???
             }

        }

例如，如果Session存储值是这样的

我的意思是，如果我取消选中某个特定元素（例如“South”），如何仅从列表中删除 South 而将其他元素保留在会话存储中。

【问题讨论】：

取消选中时，list 的值是多少？如果您正在更新list，那么您可以直接使用您在 if 条件中使用的相同语句。
@KaustubhKhare，我没有这样想。谢谢，它会工作
让我知道它是否有效，我会添加作为答案。所以其他人会从中得到帮助。
你的想法可行

标签： angular checkbox session-cookies session-storage

【解决方案1】：

您将获得list，在您选中或取消选中该复选框后，它将包含更新的值。所以可以直接使用setItem方法更新session存储值。

checkBoxClicked(list, event) {          
   if (event.checked) {
     sessionStorage.setItem("TestingSelectedPages",JSON.stringify({ 'Countries': list}));   

   } else {
    sessionStorage.setItem("TestingSelectedPages",JSON.stringify({ 'Countries': list}));   
   }
}

【讨论】：

【解决方案2】：

您在会话存储中获取您的项目，添加新项目或删除并更新会话存储

 const current = JSON.parse(sessionStorage.getItem(TestingSelectedPages));
 current.push(your new item to add);
 sessionStorage.setItem(TestingSelectedPages, JSON.stringify(current));

【讨论】：

感谢您的回复，将工作并让您知道
你的也可以，但我只能选择一个接受的答案！。很抱歉

【解决方案3】：

首先，强烈建议使用类型。此外，为了获得最佳实践，JSON 键最好使用驼峰式。现在，我将执行以下操作

checkBoxClicked(list: string[], event: Event) {
    let directionList: string[] = JSON.parse(sessionStorage.getItem('TestingSelectedPages'));
    if (event.checked) {
        directionList.countries.push(event.value);
    }
    else {
        directionList = directionList.countries.filter((direction: string) => direction !== event.value)
    }
    sessionStorage.setItem("TestingSelectedPages", JSON.stringify({ 'countries': directionList }));
}

希望这会有所帮助！

【讨论】：

你的也可以，但我只能选择一个接受的答案！。很抱歉