Question

我有一个模式，它是一个单词过滤器，输入中的每个用户数字都遍历存储中的值，为我带来结果。

当用户单击此链接时，我的算法从数组中删除了给定的项，并将更新后的值重新插入到存储中，但是当单击找到的列表中的其他项时，它开始产生错误，因为它抱怨在矢量中移走的物品的位置..

该如何解决该问题？

VM6332:1 Uncaught SyntaxError: Unexpected token . in JSON at position 0
    at JSON.parse (<anonymous>)
    at StorageController.get [as itemToJSON] (WebStorage.ts:31)
    at StorageController.removeItemByIndexOf (WebStorage.ts:59)
    at HTMLLIElement.eval (FilterData.ts:86)

WEBSTORAGE

    export class StorageController {
        protected readonly __typeStorage: string;
        protected readonly __key: string;

        public constructor(readonly typeStorage: string, readonly key: string) {
            this.__typeStorage = typeStorage;
            this.__key = key;
        }

        protected get storage(): Storage {
            switch(this.__typeStorage) {
                case 'local':
                    return localStorage;
                case 'session':
                    return sessionStorage;
            }
        }

        protected get item(): string {
            return this.storage.getItem(this.__key);
        }

        protected get itemToJSON(): JSON {
            return JSON.parse(this.item).sort();
        }

        protected get hasStorageData(): boolean {
            return this.storage ? true : false;
        }

        protected createItem(_data: any): void {
            this.storage.setItem(this.__key, _data);
        }

        protected filterItem(_data: string): Object {
            let _arrItem = (<any>this.itemToJSON);

            return _arrItem.filter((_value: string) => {
                return _value.search(_data.toUpperCase()) !== -1;
            });
        }

        protected filterItemByIndexOf(_data: string): string {
            let _arrItem = (<any>this.itemToJSON),
                itemIndexOf = (<any>this.itemToJSON).indexOf(_data.toUpperCase());
            if (itemIndexOf !== -1) {
                return _arrItem[itemIndexOf];
            }
        }

        protected removeItemByIndexOf(_data: string): void {
            let _arrItem = (<any>this.itemToJSON),
                itemIndexOf = _arrItem.indexOf(_data.toUpperCase());
            if (itemIndexOf !== -1) {
                _arrItem.splice(itemIndexOf, 1);
                this.createItem(_arrItem);
            }
        }
    }

选择控制器

class SelectController {
    // ATTRIBUTES OF THEIR CLASS
    private _filteredData: any;
    private _selectedData: any;
    protected readonly __input: HTMLInputElement;
    protected readonly __listbox: HTMLElement;

    // UTILIZATION OF THE PROCEDURES MADE IN THE MAIN CLASS
    private readonly _storageController: any;
    private readonly _selectedController: any;

    constructor(protected readonly input: string, protected readonly listbox: string, protected readonly storageController: Object, protected readonly selectedController: Object) {
        this.__input   = <HTMLInputElement>document.getElementById(input);
        this.__listbox = document.getElementById(listbox);

        this._storageController  = storageController;
        this._selectedController = selectedController;
    }

    protected set filteredData(_data: any) {
        this._filteredData = _data;
    }

    protected get filteredData(): any {
        return this._filteredData;
    }

    protected set selectedData(_data: string) {
        this._selectedData = _data;
    }

    protected get selectedData(): string {
        return this._selectedData;
    }

    protected get hasFilteredData(): boolean {
        return this.filteredData && this.filteredData.length !== 0 && this.filteredData !== undefined && this.filteredData !== null ? true : false;
    }

    protected init(): void {
        this.search();
        this.renderList();
        this.selectItem();
    }

    protected search(): void {
        this.__input.addEventListener('keyup', (_event: KeyboardEvent) => {
            let typexTextValue = (<any>_event.target).value,
                typedTextSize = typexTextValue.length;

            if (typedTextSize === 2) {
                this.filteredData = this._storageController.filterItemByIndexOf(typexTextValue);
            } else if (typedTextSize > 2) {
                this.filteredData = this._storageController.filterItem(typexTextValue);
            }
        });
    }

    protected renderList(): void {
        this.__input.addEventListener('keyup', () => {
            HelpersMethods.cleanHTML(this.__listbox);

            const HAS_LISTBOX_DATA  = this.__listbox.hasChildNodes(),
                  HAS_FILTERED_DATA = this.hasFilteredData;

            if (!HAS_LISTBOX_DATA && HAS_FILTERED_DATA) {
                const FILTERED_DATA_IS_ARRAY = Array.isArray(this.filteredData);

                FILTERED_DATA_IS_ARRAY ? this.filteredData.forEach((_value: string) => this.createHTML(_value)) : this.createHTML(this.filteredData);
            }
        });
    }

    protected createHTML(_value: string): void {
        const CONVERTED_VALUE = HelpersMethods.convertID(_value);
        const HTML_STRUCTURE = 
                    `<li role="option" id="list-unselected-${CONVERTED_VALUE}" class="list-group-item">
                        <div class="d-flex justify-content-between">
                            <div class="flex-fill">
                                <label class="form-check-label" for="checkbox-${CONVERTED_VALUE}">${_value.toUpperCase()}</label>
                            </div>
                            <div>
                                <input type="checkbox" id="checkbox-${CONVERTED_VALUE}" class="form-check-input" value="${_value.toUpperCase()}" data-target="list-unselected-${CONVERTED_VALUE}">
                            </div>
                        </div>
                    </li>`;

        this.__listbox.insertAdjacentHTML('beforeend', HTML_STRUCTURE);
    }

    protected selectItem(): void {
        this.__listbox.addEventListener('click', () => {
            this.__listbox.querySelectorAll('li').forEach((_li: HTMLElement) => {
                _li.addEventListener('click', (_event: MouseEvent) => {
                    let elementTarget      = (<any>_event).target,
                        elementTargetType  = elementTarget.type,
                        elementTargetValue = elementTarget.value;

                    if(elementTargetType === 'checkbox') {
                        let elementTargetListID = elementTarget.getAttribute('data-target');

                        this.selectedData = elementTargetValue;
                        this._storageController.removeItemByIndexOf(elementTargetValue);
                        this._selectedController.renderList();

                        HelpersMethods.hideElement(elementTargetListID);
                    }
                });
            });
        });
    }
}

Answer 1

当您将数据写回存储时，无需对它进行字符串化处理：

this.createItem(_arrItem);

...这样做：

this.storage.setItem(this.__key, _data);

您应该这样做：

this.createItem(JSON.stringify(_arrItem));

为什么在更新其值时不能重用SessionStorage？

1 个答案: