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

Question

我有一个方向列表

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

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

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

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

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

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

        }

比如Session存储值是这样的

我的意思是，如果我取消选中某个特定元素（例如，"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方法来更新session存储值。

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

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

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

Remove a particular element in session storage angular8

checkbox

session-storage

session-cookies

angular