删除会话存储angular8

Question

我有一个方向列表

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 ???
             }

        }

例如，如果“会话”存储值是这样的

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

Answer 1

您将项目保存在会话存储中，或者添加新项目，或者删除并更新会话存储

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

Answer 2

第一件事，强烈建议使用类型。 另外，最好结合使用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 }));
}

希望这会有所帮助！

Answer 3

您将获得list，其中包含选中或取消选中复选框后的更新值。因此，您可以直接使用setItem方法来更新会话存储值。

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

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