我有一个文字，它是一个文字过滤器，输入中的每个用户数字都会遍历存储中的值，从而为我带来结果。
当用户点击此链接时，我的算法会从数组中删除给定的项目并将更新的值重新插入存储中，但是当点击找到的列表中的其他项目时，它会开始出错，因为它会抱怨在矢量中删除的项目的位置..
我该怎么做才能解决这个问题？
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);
}
});
});
});
}
}
将数据写回存储时，不要对其进行字符串化：
this.createItem(_arrItem);
......这样做：
this.storage.setItem(this.__key, _data);
你应该做：
this.createItem(JSON.stringify(_arrItem));