Обертка для локального хранения localStorage с простым API, без зависимостей, размером всего 2.08 кБ (gzipped: 0.97 кБ).
Предыдущая v1 версия. Просмотр документации.
# Установка через npm
npm install storejs
Генерация минифицированных файлов и режим разработки
$ npm run build # Генерирует исходный js файл с UMD и min.js
$ npm run watch # Отслеживает изменения файлов и автоматически генерирует минифицированный js
$ npm test
$ npm run ssr
# Откройте браузер по адресу http://localhost:1987/test/test.html
Или вручную скачайте и импортируйте store.min.js в вашем HTML, вы также можете скачать его через UNPKG:
<script src="https://unpkg.com/storejs/dist/store.min.js"></script>
<script type="text/javascript">
store("test", "tank");
</script>
или
var store = require('storejs');
store("test", "tank");
⚠️ При использовании нативных методов для получения данных, поскольку данные хранятся как JSON объекты, они преобразуются в JSON строки с помощью метода JSON.stringify()
.```js
JSON.parse(localStorage.getItem('test'))
## Локальные хранилища API
```js
store(key, data); // Сохранение одной строки данных
store({key: data, key2: data2}); // Сохранение нескольких строковых данных
store(key); // Получение строки данных по ключу
store("?key"); // Проверка наличия ключа
store(); // Получение всех ключей/данных
//store(false);🔫 // (Устарело) Ввод пустого значения или ошибки может очистить базу данных
//store(key, false);🔫 // (Устарело) Удаление ключа вместе со значением ключа, когда val равно 0, невозможно сохранить...
store.set(ключ, данные[, перезапись]); // === store(ключ, данные);
store.set({ключ: данные, ключ2: данные2}); // === store({ключ: данные, ключ2: данные});
store.get(ключ[, альт]); // === store(ключ);
store.get("?ключ"); // проверяет наличие ключа
store.get("ключ1", "ключ2", "ключ3"); // получает данные для `ключ1`, `ключ2`, `ключ3`
store.remove(ключ); //===store(ключ, false)
store.clear(); // очистить все ключи/данные
store.keys(); // вернуть массив всех ключей
store.forEach(коллбэк); // циклический перебор, возврат false завершает перебор
store.search(строка); // метод поиска
store.has(key); // ⇒ проверяет наличие и возвращает true/false
// ⇒ предоставляет метод callback для обработки данных
store("test", function(key, val) {
console.log(val); // здесь обрабатывается данные, полученные через test
return [3, 4, 5]; // возвращаются данные и сохраняются
});
``````md
store(["ключ", "ключ2"], function(ключ) {
// обработка данных нескольких ключей, return и сохранение;
console.log("ключ:", ключ);
return "построчно изменяем данные";
});
// ⇒ при создании/обновлении/удалении данных, вызывает это событие
store.onStorage(function(ключ, значение) {
console.log('onStorage:', ключ, значение);
});
Установка или удаление строковых данных
store.set(ключ, данные[, перезапись]);
эквивалентен store(ключ, данные);
store.set("wcj", "1"); // ⇒ 1
store.set("wcj"); // ⇒ удаление wcj и связанных строковых данных
используйте
store.set({ключ: данные, ключ2: данные2})
вместо
Установка множества строковых данных
store.setAll(данные[, перезапись])
эквивалентна store({ключ: данные, ключ2: данные});
store.setAll({
"wcj1": 123,
"wcj2": 345
}); // сохраняет две строки данных
store.setAll(["w1", "w2", "w3"]);
// сохраняет три строки данных
// 0 ⇒ "w1"
// 1 ⇒ "w2"
// 2 ⇒ "w3"
Получение строковых данных по ключу
store.get(ключ[, альтернатива])
эквивалентна store(ключ)
store.get("wcj1"); // получает строковые данные по ключу wcj1
store("wcj1"); // аналогичная функциональность
store()
иstore.get()
используются вместо
Получение всех ключевых данных store.getAll()
эквивалентна store()
store.getAll(); // ⇒ JSON
store(); // аналогичная функциональность
Очистка всех ключевых данных store.clear()
⚠️ Устарело store(false) из-за возможности случайной очистки при передаче пустого значения или ошибке.
store.clear();
Возврат массива всех ключевых данных store.keys()
store.keys(); // ⇒ ["w1", "w2", "w3"]
```
### Поиск
Метод поиска `store.search(string)`
```js
store.search('key'); // ⇒ {"key":"keytest","key1":{"a":1},"key2":"построчно изменяем данные"}
```
### Проверка наличия
Проверка наличия и возврат `true/false` `store.has(key)`
```js
store.has("w1"); // ⇒ true
```
### Удаление
Удаление ключа вместе со всеми связанными строковыми данными `store.remove(key)`
```js
store.remove("w1"); // удаляет w1 и возвращает значение w1
store("w1", false); // также удаляет w1
```
### Циклический перебор
Циклический перебор, завершается при возврате `false`.
```js
store.forEach(function(k, d) {
console.log(k, d);
if (k === '3') return false;
});
```
### Планирование периодического удаления данных
(Запланировал сделать в будущем, чтобы автоматически очищать данные, вот идея)
```js
if (+new Date() > +new Date(2014, 11, 30)) {
localStorage.removeItem("c"); // Удаление значения c
// или localStorage.clear();
}
```
## Событие storage
Не понятно почему событие storage не работает, смотрите ниже [onStorage](#onstorage) => <s>HTML5 предоставляет событие storage для отслеживания изменений ключей и значений в локальном хранилище, используйте следующий метод:</s>
```js
if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else if (window.attachEvent) {
window.attachEvent("onstorage", handle_storage);
}
function handle_storage(e) {
if (!e) { e = window.event; }
// showStorage();
}
```
Для события `e`, это объект типа StorageEvent, который предоставляет полезные свойства для наблюдения за изменениями ключей и значений, как показано в таблице:
| Свойство | Тип | Описание |
| -------- | -------- | ------------------------------------------------------------------------------------------ |
| key | String | Название ключа, который был добавлен, удалён или изменён |
| oldValue | Any | Предыдущее значение (теперь перезаписанное) или null, если новый элемент был добавлен |
| newValue | Any | Новое значение или null, если элемент был добавлен |
| url/uri | String | Страница, которая вызвала метод, спровоцировавший данное изменение |## Цепочка вызова
```js
store.set('ad', 234).get('ad');
store.onStorage(function(type) {
console.log('тип:', type);
}).set('wcj', 12).clear().get('wcj');
// ⇒ тип: set
// ⇒ тип: clear
// ⇒ тип: set
```
## TODO
- [ ] `store.get([ключ, ключ2])` Получение данных, возвращает JSON
- [ ] `store([ключ, ключ2])` Получение данных, возвращает JSON
- [ ] `onStorage` Тестовый пример использования и реализации
## Совместимость
Источник: [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
| Характеристика | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | iPhone (iOS) | Android | Opera Mobile | Windows Phone |
| --------------------- | ------ | ---------------- | ------------------ | --------- | --------------- | ------------ | ------- | ------------ | ------------- |
| localStorage | 4+ | bk 3.5+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
| sessionStorage | 5+ | 2+ | 8+ | 10.50+ | 4+ | 3.2+ | 2.1+ | 11+ | 8+ |
## Размер локального хранилища
`JSON.stringify(localStorage).length` текущий объём используемой памяти [Проверка объёма localstorage](https://arty.name/localstorage.html)
## Связанные
- [cookiejs](https://github.com/jaywcjlove/cookie.js) 🍪 Простой и лёгковесный JavaScript API для работы с cookie браузера. Он легко загружается и используется, имеет разумный размер (~2kb) (gzip: 0.84kb) и не требует зависимостей. Не должно мешать работе любых JavaScript библиотек или фреймворков.
### Лицензия
Разрешено на условиях лицензии MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )