Использование localStorage и sessionStorage как дерева элементов

Во время рефакторинга приложения я очень недавно узнал о том, что localStorage и sessionStorage являются хранилищами ключ-значение, поэтому вопрос: есть ли у вас какая-либо реализация JavaScript для использования localStorage, sessionStorage как JSON и возможность легко редактировать их с помощью инструментов отладки браузера?

Пример: мы создаем некоторое значение для ключевого приложения, у него есть подразделы, такие как настройки, подключение, у них есть подразделы для свойств.

Итак, простой способ взаимодействовать с ними следующим образом:

if (localStorage.application.connection.URI.slice(0, 5) === "https") { ... }

И, если нам нужно уничтожить ветку для свойств и повторно инициализировать их:

localStorage.application.connection = undefined;

Любой способ сделать это? Я знаю, я могу использовать

if (localStorage.getItem("application.connection.URI").slice(0, 5) === "https") { ... }

И (спасибо за этот ответ Как удалить localStorage данные, начинающиеся с определенной строки?)

for (key in localStorage) {
    if (key.substring(0,22) == 'application.connection') {
        localStorage.removeItem(key);
    }
}

Но это немного трудно читать и использовать.

Какие-либо предложения? И извините за мой английский.


javascript html local-storage session-storage
person Maxim Llorephie    schedule 25.12.2017    source источник
comment
Может быть, JSON.encode и JSON.parse — ваш ответ?   -  person TamirNahum    schedule 25.12.2017
comment
Нет-нет, я знаю об этом, но это не может быть явно и быстро отредактировано во время выполнения. Или что-то, что может предоставить JSON для значений localStorage.   -  person Maxim Llorephie    schedule 25.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Немного поздно, но вот: я реализовал DotStorage как хакерское решение для этого около года назад.

Он не поддерживается и не полностью тестируется, но выполняет свою работу.
...Я только что проверил репозиторий: имейте в виду, что вам нужно pako чтобы это работало....

Однако не используйте его для больших целей, так как это реализуется путем автоматического переноса объектов и их свойств в прокси — реализация глубокого обнаружения изменений путем перехвата всего.

Использование: как и любой другой объект Javascript, он просто постоянный:

dotStorage.Hello = "World";
// reload page
console.assert(dotStorage.Hello == "World");


Вы можете посмотреть мой тестовый файл на основе JSFiddle здесь

Пример:

var myObj = {"New": "object"};

// save the object
dotStorage.refTest = myObj;

// get proxified instance
myObj = dotStorage.refTest;

// change nested properties
myObj.New = {"nested": {"otherObject": [0, 1]}};
console.log(JSON.stringify(dotStorage.refTest.New));

// reload the page ------------------------------------------

// change more nested properties
myObj.New.nested = 2;

// everything is still there
console.log(JSON.stringify(dotStorage.refTest.New));
person Fabian N.    schedule 25.07.2018