Удалить определенный элемент в хранилище сессии angular8

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

        }

Например, если значение хранилища сеанса такое:

Я имею в виду, если я сниму флажок с определенного элемента (скажем, «Юг»), как удалить только Юг из списка и оставить остальные в хранилище сеанса.

Answer 1

Во-первых, настоятельно рекомендуется использовать типы. Кроме того, ключи 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 2

Вы получаете list, который будет состоять из обновленных значений после того, как вы отметили или сняли флажок. Таким образом, вы можете напрямую использовать метод setItem для обновления значения хранилища сессии.

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

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

Answer 3

Вы получаете свой элемент в хранилище сеанса, добавляете новый элемент или удаляете и обновляете хранилище сеанса

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