@dxtmisha/wiki 0.39.6 → 0.39.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/defineProperty-Bjg6wMoX.js +39 -0
- package/dist/library.d.ts +0 -1
- package/dist/library.js +25 -25
- package/dist/media.js +12 -0
- package/dist/storybook.js +26929 -11
- package/package.json +1 -1
- package/src/library.ts +0 -1
- package/src/media/functional/functional-basic/api/api.en.mdx +45 -0
- package/src/media/functional/functional-basic/api/api.ru.mdx +45 -0
- package/src/media/functional/functional-basic/api/api.vi.mdx +45 -0
- package/src/media/functional/functional-basic/classes/Api/Api.en.mdx +54 -54
- package/src/media/functional/functional-basic/classes/Api/Api.ru.mdx +54 -54
- package/src/media/functional/functional-basic/classes/Api/Api.vi.mdx +54 -54
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.en.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.ru.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiCache/ApiCache.vi.mdx +111 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.en.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.ru.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDataReturn/ApiDataReturn.vi.mdx +32 -0
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.en.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.ru.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiDefault/ApiDefault.vi.mdx +24 -28
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.en.mdx +28 -14
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.ru.mdx +33 -19
- package/src/media/functional/functional-basic/classes/ApiHeaders/ApiHeaders.vi.mdx +33 -19
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.en.mdx +56 -0
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.ru.mdx +56 -0
- package/src/media/functional/functional-basic/classes/ApiHydration/ApiHydration.vi.mdx +55 -0
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.en.mdx +101 -49
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.ru.mdx +101 -49
- package/src/media/functional/functional-basic/classes/ApiInstance/ApiInstance.vi.mdx +98 -47
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.en.mdx +44 -26
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.ru.mdx +45 -27
- package/src/media/functional/functional-basic/classes/ApiPreparation/ApiPreparation.vi.mdx +44 -26
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.en.mdx +50 -21
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.ru.mdx +54 -25
- package/src/media/functional/functional-basic/classes/ApiResponse/ApiResponse.vi.mdx +55 -26
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.en.mdx +29 -32
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.ru.mdx +33 -36
- package/src/media/functional/functional-basic/classes/ApiStatus/ApiStatus.vi.mdx +33 -36
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.en.mdx +34 -53
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.ru.mdx +33 -52
- package/src/media/functional/functional-basic/classes/BroadcastMessage/BroadcastMessage.vi.mdx +39 -58
- package/src/media/functional/functional-basic/classes/Cache/Cache.en.mdx +7 -4
- package/src/media/functional/functional-basic/classes/Cache/Cache.ru.mdx +7 -4
- package/src/media/functional/functional-basic/classes/Cache/Cache.vi.mdx +28 -25
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.en.mdx +45 -53
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.ru.mdx +46 -54
- package/src/media/functional/functional-basic/classes/CacheItem/CacheItem.vi.mdx +47 -55
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.en.mdx +13 -1
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.ru.mdx +13 -1
- package/src/media/functional/functional-basic/classes/CacheStatic/CacheStatic.vi.mdx +13 -0
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.en.mdx +88 -44
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.ru.mdx +88 -44
- package/src/media/functional/functional-basic/classes/Cookie/Cookie.vi.mdx +85 -41
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.en.mdx +43 -22
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.ru.mdx +46 -25
- package/src/media/functional/functional-basic/classes/CookieBlock/CookieBlock.vi.mdx +43 -22
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.en.mdx +84 -0
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.ru.mdx +84 -0
- package/src/media/functional/functional-basic/classes/CookieBlockInstance/CookieBlockInstance.vi.mdx +100 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.en.mdx +153 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.ru.mdx +153 -0
- package/src/media/functional/functional-basic/classes/CookieStorage/CookieStorage.vi.mdx +153 -0
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.en.mdx +32 -25
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.ru.mdx +32 -25
- package/src/media/functional/functional-basic/classes/DataStorage/DataStorage.vi.mdx +32 -27
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.en.mdx +36 -4
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.ru.mdx +36 -4
- package/src/media/functional/functional-basic/classes/Datetime/Datetime.vi.mdx +36 -4
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.en.mdx +101 -70
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.ru.mdx +100 -69
- package/src/media/functional/functional-basic/classes/ErrorCenter/ErrorCenter.vi.mdx +101 -70
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.en.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.ru.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterHandler/ErrorCenterHandler.vi.mdx +46 -42
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.en.mdx +44 -96
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.ru.mdx +44 -96
- package/src/media/functional/functional-basic/classes/ErrorCenterInstance/ErrorCenterInstance.vi.mdx +44 -96
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.en.mdx +49 -28
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.ru.mdx +21 -0
- package/src/media/functional/functional-basic/classes/EventItem/EventItem.vi.mdx +63 -42
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.en.mdx +97 -109
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.ru.mdx +86 -98
- package/src/media/functional/functional-basic/classes/Formatters/Formatters.vi.mdx +99 -111
- package/src/media/functional/functional-basic/classes/Geo/Geo.en.mdx +3 -3
- package/src/media/functional/functional-basic/classes/Geo/Geo.ru.mdx +5 -5
- package/src/media/functional/functional-basic/classes/Geo/Geo.vi.mdx +5 -5
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.en.mdx +83 -40
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.ru.mdx +83 -40
- package/src/media/functional/functional-basic/classes/GeoFlag/GeoFlag.vi.mdx +87 -44
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.en.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.ru.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoInstance/GeoInstance.vi.mdx +81 -0
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.en.mdx +56 -105
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.ru.mdx +53 -102
- package/src/media/functional/functional-basic/classes/GeoPhone/GeoPhone.vi.mdx +55 -105
- package/src/media/functional/functional-basic/classes/Hash/Hash.en.mdx +18 -7
- package/src/media/functional/functional-basic/classes/Hash/Hash.ru.mdx +18 -7
- package/src/media/functional/functional-basic/classes/Hash/Hash.vi.mdx +18 -7
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.en.mdx +54 -0
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.ru.mdx +54 -0
- package/src/media/functional/functional-basic/classes/HashInstance/HashInstance.vi.mdx +54 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.en.mdx +78 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.ru.mdx +78 -0
- package/src/media/functional/functional-basic/classes/MetaStatic/MetaStatic.vi.mdx +78 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.en.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.ru.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ResumableTimer/ResumableTimer.vi.mdx +50 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.en.mdx +131 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.ru.mdx +131 -0
- package/src/media/functional/functional-basic/classes/ServerStorage/ServerStorage.vi.mdx +131 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.en.mdx +97 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.ru.mdx +97 -0
- package/src/media/functional/functional-basic/classes/StorageCallback/StorageCallback.vi.mdx +97 -0
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.en.mdx +13 -5
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.ru.mdx +13 -5
- package/src/media/functional/functional-basic/functions/addTagHighlightMatch/addTagHighlightMatch.vi.mdx +13 -5
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.en.mdx +37 -19
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.ru.mdx +37 -19
- package/src/media/functional/functional-basic/functions/anyToString/anyToString.vi.mdx +35 -17
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.en.mdx +31 -19
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.ru.mdx +31 -19
- package/src/media/functional/functional-basic/functions/applyTemplate/applyTemplate.vi.mdx +32 -20
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.en.mdx +29 -15
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.ru.mdx +28 -14
- package/src/media/functional/functional-basic/functions/blobToBase64/blobToBase64.vi.mdx +28 -14
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.en.mdx +7 -3
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.ru.mdx +7 -3
- package/src/media/functional/functional-basic/functions/capitalize/capitalize.vi.mdx +7 -3
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.en.mdx +17 -13
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.ru.mdx +17 -13
- package/src/media/functional/functional-basic/functions/copyObject/copyObject.vi.mdx +17 -13
- package/src/media/functional/functional-basic/functions/createElement/createElement.en.mdx +2 -0
- package/src/media/functional/functional-basic/functions/createElement/createElement.ru.mdx +2 -0
- package/src/media/functional/functional-basic/functions/createElement/createElement.vi.mdx +2 -0
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.en.mdx +1 -3
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.ru.mdx +1 -3
- package/src/media/functional/functional-basic/functions/encodeAttribute/encodeAttribute.vi.mdx +1 -3
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.en.mdx +13 -10
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.ru.mdx +14 -11
- package/src/media/functional/functional-basic/functions/executeFunction/executeFunction.vi.mdx +12 -9
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.en.mdx +14 -13
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.ru.mdx +15 -14
- package/src/media/functional/functional-basic/functions/executePromise/executePromise.vi.mdx +14 -13
- package/src/media/functional/functional-basic/functions/forEach/forEach.en.mdx +1 -1
- package/src/media/functional/functional-basic/functions/forEach/forEach.ru.mdx +1 -1
- package/src/media/functional/functional-basic/functions/forEach/forEach.vi.mdx +1 -1
- package/src/media/functional/functional-basic/functions/frame/frame.en.mdx +7 -4
- package/src/media/functional/functional-basic/functions/frame/frame.ru.mdx +6 -3
- package/src/media/functional/functional-basic/functions/frame/frame.vi.mdx +7 -4
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.en.mdx +34 -0
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.ru.mdx +34 -0
- package/src/media/functional/functional-basic/functions/getArrayHighlightMatch/getArrayHighlightMatch.vi.mdx +35 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.en.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.ru.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.vi.mdx +2 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.en.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.ru.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getCurrentTime/getCurrentTime.vi.mdx +21 -0
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.en.mdx +17 -3
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.ru.mdx +17 -3
- package/src/media/functional/functional-basic/functions/getElementId/getElementId.vi.mdx +18 -4
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.en.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.ru.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getElementSafeScript/getElementSafeScript.vi.mdx +31 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.en.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.ru.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getOnlyText/getOnlyText.vi.mdx +25 -0
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.en.mdx +11 -4
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.ru.mdx +14 -7
- package/src/media/functional/functional-basic/functions/getSearchExp/getSearchExp.vi.mdx +13 -6
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.en.mdx +3 -2
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.ru.mdx +3 -2
- package/src/media/functional/functional-basic/functions/getSeparatingSearchExp/getSeparatingSearchExp.vi.mdx +3 -2
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.en.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.ru.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toNumber/toNumber.vi.mdx +25 -9
- package/src/media/functional/functional-basic/functions/toString/toString.en.mdx +28 -0
- package/src/media/functional/functional-basic/functions/toString/toString.ru.mdx +28 -0
- package/src/media/functional/functional-basic/functions/toString/toString.vi.mdx +28 -0
- package/src/media/functional/ui/about/about.en.mdx +45 -0
- package/src/media/functional/ui/about/about.ru.mdx +45 -0
- package/src/media/functional/ui/about/about.vi.mdx +45 -0
- package/src/media/functional/ui/component/component.en.mdx +104 -0
- package/src/media/functional/ui/component/component.ru.mdx +106 -0
- package/src/media/functional/ui/component/component.vi.mdx +104 -0
- package/src/media/functional/ui/setup/setup.en.mdx +72 -0
- package/src/media/functional/ui/setup/setup.ru.mdx +72 -0
- package/src/media/functional/ui/setup/setup.vi.mdx +72 -0
- package/src/media/functional/ui/wiki-data.en.mdx +114 -0
- package/src/media/functional/ui/wiki-data.ru.mdx +114 -0
- package/src/media/functional/ui/wiki-data.vi.mdx +114 -0
- package/dist/WikiStorybookDescriptions-IKMchHA-.js +0 -26959
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import {Meta} from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/functional-basic/Classes/CookieStorage - Хранилище Cookie'/>
|
|
4
|
+
|
|
5
|
+
# Класс CookieStorage
|
|
6
|
+
|
|
7
|
+
Класс для управления хранением cookie с поддержкой пользовательских слушателей. Предоставляет низкоуровневый интерфейс для работы с cookie в различных окружениях (DOM, SSR) с автоматическим парсингом типов и безопасной обработкой данных.
|
|
8
|
+
|
|
9
|
+
Включает тесную интеграцию с `CookieBlock` для контроля доступа и поддерживает декодирование URL-encoded значений.
|
|
10
|
+
|
|
11
|
+
## Ключевые особенности
|
|
12
|
+
|
|
13
|
+
- **Гибкое хранение** — поддержка памяти процесса и внешних механизмов хранения через слушатели
|
|
14
|
+
- **Автоматическое преобразование** — интеллектуальное преобразование строковых значений в соответствующие типы данных
|
|
15
|
+
- **Интеграция с блокировкой** — уважает глобальную блокировку записи через `CookieBlock`
|
|
16
|
+
- **Безопасность окружения** — автоматическое определение DOM окружения и адаптация поведения
|
|
17
|
+
- **URL-декодирование** — автоматическое декодирование имен и значений при чтении из DOM
|
|
18
|
+
|
|
19
|
+
## Статические методы
|
|
20
|
+
|
|
21
|
+
### Действие
|
|
22
|
+
|
|
23
|
+
#### `get`
|
|
24
|
+
|
|
25
|
+
Получает значение cookie по имени с автоматическим преобразованием типов. Если значение не существует и указано значение по умолчанию, оно будет установлено и сохранено.
|
|
26
|
+
|
|
27
|
+
**Параметры:**
|
|
28
|
+
- `name: string` — имя cookie
|
|
29
|
+
- `defaultValue?: T | (() => T)` — значение по умолчанию или функция, возвращающая значение
|
|
30
|
+
|
|
31
|
+
**Возвращает:** `T | undefined` — преобразованное значение cookie или значение по умолчанию
|
|
32
|
+
|
|
33
|
+
#### `set`
|
|
34
|
+
|
|
35
|
+
Сохраняет значение cookie с указанными параметрами и автоматическим обновлением в памяти и DOM. Если активна блокировка через `CookieBlock`, значение сохраняется только в памяти.
|
|
36
|
+
|
|
37
|
+
**Параметры:**
|
|
38
|
+
- `name: string` — имя cookie
|
|
39
|
+
- `value: T | (() => T)` — значение или функция, возвращающая значение
|
|
40
|
+
- `options?: CookieOptions` — дополнительные параметры cookie
|
|
41
|
+
|
|
42
|
+
**Возвращает:** `T` — сохраненное значение
|
|
43
|
+
|
|
44
|
+
#### `remove`
|
|
45
|
+
|
|
46
|
+
Удаляет cookie, устанавливая пустое значение и отрицательный срок действия. Эквивалентно вызову `set(name, '', { age: -1 })`.
|
|
47
|
+
|
|
48
|
+
**Параметры:**
|
|
49
|
+
- `name: string` — имя cookie
|
|
50
|
+
|
|
51
|
+
### Конфигурация
|
|
52
|
+
|
|
53
|
+
- `init(getListener, setListener)` — Инициализирует хранилище с пользовательскими слушателями для чтения и записи данных
|
|
54
|
+
- `reset()` — Сбрасывает хранилище, очищая все элементы в памяти и удаляя слушатели
|
|
55
|
+
|
|
56
|
+
### Вспомогательные
|
|
57
|
+
|
|
58
|
+
- `update()` — Обновляет данные в памяти, парся значения из `document.cookie`
|
|
59
|
+
|
|
60
|
+
## Типы
|
|
61
|
+
|
|
62
|
+
### `CookieOptions`
|
|
63
|
+
|
|
64
|
+
Объект конфигурации для параметров cookie:
|
|
65
|
+
|
|
66
|
+
- `age?: number` — время жизни в секундах (атрибут Max-Age)
|
|
67
|
+
- `sameSite?: 'strict' | 'lax'` — политика SameSite
|
|
68
|
+
- `arguments?: string[]` — дополнительные директивы для строки cookie
|
|
69
|
+
|
|
70
|
+
## Встроенное преобразование типов
|
|
71
|
+
|
|
72
|
+
`CookieStorage` автоматически преобразует строковые значения при чтении:
|
|
73
|
+
|
|
74
|
+
- `'undefined'` → `undefined`
|
|
75
|
+
- `'null'` → `null`
|
|
76
|
+
- `'true'` → `true`
|
|
77
|
+
- `'false'` → `false`
|
|
78
|
+
- `'123'` → `123` (число)
|
|
79
|
+
- `'{"key":"value"}'` → `{key: 'value'}` (объект JSON)
|
|
80
|
+
|
|
81
|
+
## Примеры
|
|
82
|
+
|
|
83
|
+
### Базовое использование
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
87
|
+
|
|
88
|
+
// Получение значения с дефолтным значением
|
|
89
|
+
const theme = CookieStorage.get<string>('theme', 'dark')
|
|
90
|
+
|
|
91
|
+
// Сохранение значения
|
|
92
|
+
CookieStorage.set('user', 'john', {
|
|
93
|
+
age: 3600,
|
|
94
|
+
sameSite: 'lax'
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
// Удаление
|
|
98
|
+
CookieStorage.remove('user')
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Инициализация с внешним хранилищем
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
105
|
+
|
|
106
|
+
CookieStorage.init(
|
|
107
|
+
(key) => myStorage.get(key),
|
|
108
|
+
(key, value, options) => myStorage.set(key, value, options)
|
|
109
|
+
)
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Обновление и сброс
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
116
|
+
|
|
117
|
+
// Обновить данные в памяти из document.cookie
|
|
118
|
+
// Полезно, когда куки были установлены внешне
|
|
119
|
+
CookieStorage.update()
|
|
120
|
+
|
|
121
|
+
// Сбросить хранилище (очистить слушатели и данные в памяти)
|
|
122
|
+
// Полезно для тестирования или очистки
|
|
123
|
+
CookieStorage.reset()
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Полный рабочий процесс
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
130
|
+
|
|
131
|
+
// Инициализация с пользовательским хранилищем
|
|
132
|
+
CookieStorage.init(
|
|
133
|
+
(key) => redis.get(key),
|
|
134
|
+
(key, value, options) => redis.set(key, value, options)
|
|
135
|
+
)
|
|
136
|
+
|
|
137
|
+
// Установка значения с параметрами
|
|
138
|
+
CookieStorage.set('user', 'john', {
|
|
139
|
+
age: 3600, // 1 час
|
|
140
|
+
sameSite: 'lax', // Политика SameSite
|
|
141
|
+
arguments: ['Secure', 'Path=/'] // Дополнительные директивы
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
// Получение значения с преобразованием типа
|
|
145
|
+
const user = CookieStorage.get<string>('user')
|
|
146
|
+
|
|
147
|
+
// Обновление из внешнего источника
|
|
148
|
+
CookieStorage.update()
|
|
149
|
+
|
|
150
|
+
// Очистка
|
|
151
|
+
CookieStorage.remove('user')
|
|
152
|
+
CookieStorage.reset()
|
|
153
|
+
```
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import {Meta} from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/functional-basic/Classes/CookieStorage - Lưu trữ Cookie'/>
|
|
4
|
+
|
|
5
|
+
# Lớp CookieStorage
|
|
6
|
+
|
|
7
|
+
Lớp quản lý lưu trữ cookie với hỗ trợ người nghe tùy chỉnh. Cung cấp giao diện cấp thấp để làm việc với cookie trong các môi trường khác nhau (DOM, SSR) với phân tích tự động kiểu và xử lý dữ liệu an toàn.
|
|
8
|
+
|
|
9
|
+
Bao gồm tích hợp chặt chẽ với `CookieBlock` để kiểm soát truy cập và hỗ trợ giải mã các giá trị đã được mã hóa URL.
|
|
10
|
+
|
|
11
|
+
## Các tính năng chính
|
|
12
|
+
|
|
13
|
+
- **Lưu trữ linh hoạt** — hỗ trợ bộ nhớ quy trình và cơ chế lưu trữ bên ngoài thông qua người nghe
|
|
14
|
+
- **Phân tích tự động** — chuyển đổi thông minh các giá trị chuỗi thành các loại dữ liệu tương ứng
|
|
15
|
+
- **Tích hợp chặn** — tôn trọng chặn ghi toàn cầu qua `CookieBlock`
|
|
16
|
+
- **Nhận thức môi trường** — tự động phát hiện môi trường DOM và thích ứng hành vi
|
|
17
|
+
- **Giải mã URL** — tự động giải mã tên và giá trị khi đọc từ DOM
|
|
18
|
+
|
|
19
|
+
## Phương thức tĩnh
|
|
20
|
+
|
|
21
|
+
### Hành động
|
|
22
|
+
|
|
23
|
+
#### `get`
|
|
24
|
+
|
|
25
|
+
Lấy giá trị cookie theo tên với chuyển đổi kiểu tự động. Nếu giá trị không tồn tại và có chỉ định giá trị mặc định, nó sẽ được thiết lập và lưu trữ.
|
|
26
|
+
|
|
27
|
+
**Tham số:**
|
|
28
|
+
- `name: string` — tên cookie
|
|
29
|
+
- `defaultValue?: T | (() => T)` — giá trị mặc định hoặc hàm trả về giá trị
|
|
30
|
+
|
|
31
|
+
**Trả về:** `T | undefined` — giá trị cookie đã chuyển đổi hoặc giá trị mặc định
|
|
32
|
+
|
|
33
|
+
#### `set`
|
|
34
|
+
|
|
35
|
+
Lưu giá trị cookie với các tham số được chỉ định và cập nhật tự động trong bộ nhớ và DOM. Nếu chặn đang hoạt động qua `CookieBlock`, giá trị chỉ được lưu trong bộ nhớ.
|
|
36
|
+
|
|
37
|
+
**Tham số:**
|
|
38
|
+
- `name: string` — tên cookie
|
|
39
|
+
- `value: T | (() => T)` — giá trị hoặc hàm trả về giá trị
|
|
40
|
+
- `options?: CookieOptions` — tham số cookie bổ sung
|
|
41
|
+
|
|
42
|
+
**Trả về:** `T` — giá trị đã lưu
|
|
43
|
+
|
|
44
|
+
#### `remove`
|
|
45
|
+
|
|
46
|
+
Xóa cookie bằng cách đặt giá trị rỗng và thời hạn hết hạn âm. Tương đương với việc gọi `set(name, '', { age: -1 })`.
|
|
47
|
+
|
|
48
|
+
**Tham số:**
|
|
49
|
+
- `name: string` — tên cookie
|
|
50
|
+
|
|
51
|
+
### Cấu hình
|
|
52
|
+
|
|
53
|
+
- `init(getListener, setListener)` — Khởi tạo lưu trữ với người nghe tùy chỉnh để đọc và ghi dữ liệu
|
|
54
|
+
- `reset()` — Đặt lại lưu trữ bằng cách xóa tất cả phần tử trong bộ nhớ và xóa người nghe
|
|
55
|
+
|
|
56
|
+
### Hỗ trợ
|
|
57
|
+
|
|
58
|
+
- `update()` — Cập nhật dữ liệu trong bộ nhớ bằng cách phân tích giá trị từ `document.cookie`
|
|
59
|
+
|
|
60
|
+
## Các loại
|
|
61
|
+
|
|
62
|
+
### `CookieOptions`
|
|
63
|
+
|
|
64
|
+
Đối tượng cấu hình cho tham số cookie:
|
|
65
|
+
|
|
66
|
+
- `age?: number` — thời gian tồn tại tính bằng giây (thuộc tính Max-Age)
|
|
67
|
+
- `sameSite?: 'strict' | 'lax'` — chính sách SameSite
|
|
68
|
+
- `arguments?: string[]` — các chỉ thị bổ sung cho chuỗi cookie
|
|
69
|
+
|
|
70
|
+
## Chuyển đổi loại tích hợp
|
|
71
|
+
|
|
72
|
+
`CookieStorage` tự động chuyển đổi các giá trị chuỗi khi đọc:
|
|
73
|
+
|
|
74
|
+
- `'undefined'` → `undefined`
|
|
75
|
+
- `'null'` → `null`
|
|
76
|
+
- `'true'` → `true`
|
|
77
|
+
- `'false'` → `false`
|
|
78
|
+
- `'123'` → `123` (số)
|
|
79
|
+
- `'{"key":"value"}'` → `{key: 'value'}` (đối tượng JSON)
|
|
80
|
+
|
|
81
|
+
## Ví dụ
|
|
82
|
+
|
|
83
|
+
### Sử dụng cơ bản
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
87
|
+
|
|
88
|
+
// Lấy với giá trị mặc định
|
|
89
|
+
const theme = CookieStorage.get<string>('theme', 'dark')
|
|
90
|
+
|
|
91
|
+
// Lưu giá trị
|
|
92
|
+
CookieStorage.set('user', 'john', {
|
|
93
|
+
age: 3600,
|
|
94
|
+
sameSite: 'lax'
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
// Xóa
|
|
98
|
+
CookieStorage.remove('user')
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Khởi tạo với lưu trữ bên ngoài
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
105
|
+
|
|
106
|
+
CookieStorage.init(
|
|
107
|
+
(key) => myStorage.get(key),
|
|
108
|
+
(key, value, options) => myStorage.set(key, value, options)
|
|
109
|
+
)
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Cập nhật và đặt lại
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
116
|
+
|
|
117
|
+
// Cập nhật dữ liệu trong bộ nhớ từ document.cookie
|
|
118
|
+
// Hữu ích khi cookie được đặt từ bên ngoài
|
|
119
|
+
CookieStorage.update()
|
|
120
|
+
|
|
121
|
+
// Đặt lại lưu trữ (xóa người nghe và dữ liệu trong bộ nhớ)
|
|
122
|
+
// Hữu ích cho kiểm thử hoặc dọn dẹp
|
|
123
|
+
CookieStorage.reset()
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Quy trình làm việc hoàn chỉnh
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
import { CookieStorage } from '@dxtmisha/functional-basic'
|
|
130
|
+
|
|
131
|
+
// Khởi tạo với lưu trữ tùy chỉnh
|
|
132
|
+
CookieStorage.init(
|
|
133
|
+
(key) => redis.get(key),
|
|
134
|
+
(key, value, options) => redis.set(key, value, options)
|
|
135
|
+
)
|
|
136
|
+
|
|
137
|
+
// Đặt giá trị với các tùy chọn
|
|
138
|
+
CookieStorage.set('user', 'john', {
|
|
139
|
+
age: 3600, // 1 giờ
|
|
140
|
+
sameSite: 'lax', // Chính sách SameSite
|
|
141
|
+
arguments: ['Secure', 'Path=/'] // Các chỉ thị bổ sung
|
|
142
|
+
})
|
|
143
|
+
|
|
144
|
+
// Nhận giá trị với chuyển đổi loại
|
|
145
|
+
const user = CookieStorage.get<string>('user')
|
|
146
|
+
|
|
147
|
+
// Cập nhật từ nguồn bên ngoài
|
|
148
|
+
CookieStorage.update()
|
|
149
|
+
|
|
150
|
+
// Dọn dẹp
|
|
151
|
+
CookieStorage.remove('user')
|
|
152
|
+
CookieStorage.reset()
|
|
153
|
+
```
|
|
@@ -6,23 +6,31 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
A versatile class for interacting with the browser's `localStorage` and `sessionStorage`. It features built-in prefixes, cache expiration, memory caching for active instances, and automatic JSON serialization.
|
|
8
8
|
|
|
9
|
+
> `DataStorage` is an **auxiliary class**, designed for low-level interaction with browser storage. In most cases, it is recommended to use higher-level classes like `Cookie` or `Api` for specific data needs.
|
|
10
|
+
|
|
9
11
|
## Key Features
|
|
10
12
|
|
|
11
13
|
- **Automatic Serialization** — seamlessly handles JSON parsing and stringifying for stored configurations and objects.
|
|
12
14
|
- **Time-based Caching** — allows saving objects with timestamps and respects age constraints during data retrieval.
|
|
13
15
|
- **Prefix Management** — supports global and instance-specific prefixes to isolate and group keys within `localStorage`.
|
|
14
16
|
- **Memory Efficiency** — creates singletons for identical keys, avoiding duplicate reads from disk.
|
|
17
|
+
- **SSR Ready** — uses request-specific isolation during server-side rendering to prevent data leaks between parallel requests.
|
|
15
18
|
|
|
16
19
|
## Initialization
|
|
17
20
|
|
|
18
21
|
To initialize the object, call the `DataStorage(name, isSession)` constructor.
|
|
19
22
|
|
|
23
|
+
### Generic Constraints
|
|
24
|
+
|
|
25
|
+
The class supports the following generic to ensure strict typing of the stored value:
|
|
26
|
+
- `T` — The type of the value being stored.
|
|
27
|
+
|
|
20
28
|
**Parameters:**
|
|
21
29
|
- `name: string` — the name of the storage key.
|
|
22
30
|
- `isSession: boolean = false` — whether to use `sessionStorage` (defaults to `localStorage`).
|
|
23
31
|
|
|
24
32
|
```typescript
|
|
25
|
-
import { DataStorage } from '@dxtmisha/functional'
|
|
33
|
+
import { DataStorage } from '@dxtmisha/functional-basic'
|
|
26
34
|
|
|
27
35
|
// 1. Create an instance for localStorage
|
|
28
36
|
const settings = new DataStorage('settings')
|
|
@@ -31,23 +39,31 @@ const settings = new DataStorage('settings')
|
|
|
31
39
|
const session = new DataStorage('user_session', true)
|
|
32
40
|
```
|
|
33
41
|
|
|
34
|
-
##
|
|
42
|
+
## Methods
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
### Storage Access
|
|
37
45
|
|
|
38
|
-
|
|
46
|
+
- `get(defaultValue?: T | (() => T), cache?: number): T | undefined` — Retrieves the currently saved value. If a cache time is provided, it returns `undefined` if the data is stale.
|
|
47
|
+
- `set(value?: T | (() => T)): T | undefined` — Sets or updates the value in the storage mechanism. Passing `undefined` deletes the item.
|
|
48
|
+
- `remove(): this` — Clears the corresponding key from the storage environment and the memory instance.
|
|
49
|
+
- `update(): this` — Forces the memory instance to synchronize with the current raw data inside the physical Storage APIs.
|
|
39
50
|
|
|
40
|
-
###
|
|
51
|
+
### Configuration
|
|
41
52
|
|
|
42
|
-
|
|
53
|
+
- `static setPrefix(newPrefix: string): void` — Changes the global prefix applied to new instances. The default prefix is `ui-storage`.
|
|
43
54
|
|
|
44
|
-
|
|
45
|
-
- `defaultValue?: T | (() => T)` — a fallback value to return if the storage is empty.
|
|
46
|
-
- `cache?: number` — maximum allowed age (in seconds). If the data is older, it behaves as if nothing was stored.
|
|
55
|
+
## SSR and Hydration
|
|
47
56
|
|
|
48
|
-
|
|
57
|
+
The `DataStorage` class is fully compatible with Server-Side Rendering (SSR). It uses a special registry to isolate instances between different HTTP requests on the server.
|
|
49
58
|
|
|
59
|
+
> To avoid hydration mismatches (when the server-rendered HTML differs from the client-rendered one), it is recommended to call `get()` inside `useEffect` or other client-only hooks. On the server, `get()` will return `undefined` (or the `defaultValue`), as `localStorage` is not available.
|
|
60
|
+
|
|
61
|
+
## Examples
|
|
62
|
+
|
|
63
|
+
### Using Default Values and Cache
|
|
50
64
|
```javascript
|
|
65
|
+
const settings = new DataStorage('user_settings')
|
|
66
|
+
|
|
51
67
|
// Get data, falling back to an empty object if not found
|
|
52
68
|
const currentSettings = settings.get({})
|
|
53
69
|
|
|
@@ -55,20 +71,11 @@ const currentSettings = settings.get({})
|
|
|
55
71
|
const cachedItem = settings.get(undefined, 60)
|
|
56
72
|
```
|
|
57
73
|
|
|
58
|
-
###
|
|
59
|
-
|
|
60
|
-
Sets or updates the value in the storage mechanism.
|
|
61
|
-
|
|
62
|
-
**Parameters:**
|
|
63
|
-
- `value?: T | (() => T)` — the value to save. Passing `undefined` will delete the item from storage.
|
|
64
|
-
|
|
65
|
-
**Returns:** `T | undefined` — the stored value.
|
|
66
|
-
|
|
74
|
+
### Manual Synchronization
|
|
67
75
|
```javascript
|
|
68
|
-
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Additional Methods
|
|
76
|
+
const storage = new DataStorage('shared_data')
|
|
72
77
|
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
// ... data might be changed in another tab or part of the app
|
|
79
|
+
storage.update() // Sync memory instance with disk
|
|
80
|
+
console.log(storage.get())
|
|
81
|
+
```
|
|
@@ -6,23 +6,31 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
Универсальный класс для взаимодействия с `localStorage` и `sessionStorage` браузера. Включает в себя автоматическое создание префиксов, ограничение срока действия кэша (возраст), кэширование в памяти для активных экземпляров и автоматическую сериализацию JSON.
|
|
8
8
|
|
|
9
|
+
> `DataStorage` является **вспомогательным классом**, предназначенным для низкоуровневого взаимодействия с хранилищем браузера. В большинстве случаев рекомендуется использовать специализированные классы, такие как `Cookie` или `Api`, для конкретных задач.
|
|
10
|
+
|
|
9
11
|
## Основные возможности
|
|
10
12
|
|
|
11
13
|
- **Автоматическая сериализация** — легко справляется с разбором и преобразованием в JSON-строку при хранении конфигураций и объектов.
|
|
12
14
|
- **Хранение с учётом времени** — позволяет сохранять объекты с временными метками и учитывать ограничения по возрасту значения во время его извлечения.
|
|
13
15
|
- **Управление префиксами** — поддерживает глобальные и специфичные для каждого экземпляра префиксы, позволяющие изолировать и группировать ключи в рамках `localStorage`.
|
|
14
16
|
- **Эффективная память** — создает паттерн singleton для идентичных ключей, чтобы избежать одновременного чтения непосредственно с диска.
|
|
17
|
+
- **Поддержка SSR** — использует изоляцию на уровне запросов при серверном рендеринге, предотвращая утечку данных между параллельными сессиями.
|
|
15
18
|
|
|
16
19
|
## Инициализация
|
|
17
20
|
|
|
18
21
|
Для инициализации объекта вызовите конструктор `DataStorage(name, isSession)`.
|
|
19
22
|
|
|
23
|
+
### Ограничения дженериков (Generic Constraints)
|
|
24
|
+
|
|
25
|
+
Класс поддерживает следующий дженерик для обеспечения строгой типизации сохраняемого значения:
|
|
26
|
+
- `T` — Тип данных, хранящихся в хранилище.
|
|
27
|
+
|
|
20
28
|
**Параметры:**
|
|
21
29
|
- `name: string` — название ключа в хранилище.
|
|
22
30
|
- `isSession: boolean = false` — нужно ли использовать `sessionStorage` (по умолчанию `localStorage`).
|
|
23
31
|
|
|
24
32
|
```typescript
|
|
25
|
-
import { DataStorage } from '@dxtmisha/functional'
|
|
33
|
+
import { DataStorage } from '@dxtmisha/functional-basic'
|
|
26
34
|
|
|
27
35
|
// 1. Создание экземпляра для localStorage
|
|
28
36
|
const settings = new DataStorage('settings')
|
|
@@ -31,23 +39,31 @@ const settings = new DataStorage('settings')
|
|
|
31
39
|
const session = new DataStorage('user_session', true)
|
|
32
40
|
```
|
|
33
41
|
|
|
34
|
-
##
|
|
42
|
+
## Методы
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
### Доступ к хранилищу
|
|
37
45
|
|
|
38
|
-
|
|
46
|
+
- `get(defaultValue?: T | (() => T), cache?: number): T | undefined` — Извлекает текущее сохраненное значение. Если указано время кэширования, возвращает `undefined`, если данные устарели.
|
|
47
|
+
- `set(value?: T | (() => T)): T | undefined` — Устанавливает или обновляет значение в хранилище. Передача `undefined` удаляет элемент.
|
|
48
|
+
- `remove(): this` — Удаляет соответствующий ключ из хранилища и очищает экземпляр в памяти.
|
|
49
|
+
- `update(): this` — Принудительно синхронизирует экземпляр памяти с актуальными данными из Storage API.
|
|
39
50
|
|
|
40
|
-
###
|
|
51
|
+
### Конфигурация
|
|
41
52
|
|
|
42
|
-
|
|
53
|
+
- `static setPrefix(newPrefix: string): void` — Изменяет глобальный префикс, применяемый ко всем новым экземплярам. Префикс по умолчанию — `ui-storage`.
|
|
43
54
|
|
|
44
|
-
|
|
45
|
-
- `defaultValue?: T | (() => T)` — запасное значение, которое будет возвращено, если хранилище пусто.
|
|
46
|
-
- `cache?: number` — максимально допустимый возраст (в секундах). Если данные старше, они считаются не существующими.
|
|
55
|
+
## SSR и Гидратация
|
|
47
56
|
|
|
48
|
-
|
|
57
|
+
Класс `DataStorage` полностью совместим с серверным рендерингом (SSR). Он использует специальный реестр для изоляции экземпляров между различными HTTP-запросами на сервере.
|
|
49
58
|
|
|
59
|
+
> Чтобы избежать ошибок гидратации (когда HTML от сервера не совпадает с клиентским), рекомендуется вызывать метод `get()` внутри `useEffect` или других клиентских хуков. На сервере `get()` всегда будет возвращать `undefined` (или `defaultValue`), так как `localStorage` недоступен.
|
|
60
|
+
|
|
61
|
+
## Примеры
|
|
62
|
+
|
|
63
|
+
### Использование значений по умолчанию и кэша
|
|
50
64
|
```javascript
|
|
65
|
+
const settings = new DataStorage('user_settings')
|
|
66
|
+
|
|
51
67
|
// Получение данных с откатом к пустому объекту, если они не найдены
|
|
52
68
|
const currentSettings = settings.get({})
|
|
53
69
|
|
|
@@ -55,20 +71,11 @@ const currentSettings = settings.get({})
|
|
|
55
71
|
const cachedItem = settings.get(undefined, 60)
|
|
56
72
|
```
|
|
57
73
|
|
|
58
|
-
###
|
|
59
|
-
|
|
60
|
-
Устанавливает или обновляет значение в механизме хранения.
|
|
61
|
-
|
|
62
|
-
**Параметры:**
|
|
63
|
-
- `value?: T | (() => T)` — значение для сохранения. Передача `undefined` удалит элемент из хранилища.
|
|
64
|
-
|
|
65
|
-
**Возвращает:** `T | undefined` — сохраненное значение.
|
|
66
|
-
|
|
74
|
+
### Ручная синхронизация
|
|
67
75
|
```javascript
|
|
68
|
-
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Дополнительные методы
|
|
76
|
+
const storage = new DataStorage('shared_data')
|
|
72
77
|
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
// ... данные могли быть изменены в другой вкладке или части приложения
|
|
79
|
+
storage.update() // Синхронизируем память с диском
|
|
80
|
+
console.log(storage.get())
|
|
81
|
+
```
|
|
@@ -6,23 +6,31 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
Một lớp linh hoạt để tương tác với `localStorage` và `sessionStorage` của trình duyệt. Nó bao gồm các tiền tố được tích hợp sẵn, thời gian hết hạn bộ đệm (cache), lưu vào bộ nhớ đệm (memory caching) cho các bản sao hoạt động và chuyển đổi JSON tự động.
|
|
8
8
|
|
|
9
|
+
> `DataStorage` là một **lớp phụ trợ**, được thiết kế để tương tác cấp thấp với bộ nhớ trình duyệt. Trong hầu hết các trường hợp, bạn nên sử dụng các lớp cấp cao hơn như `Cookie` hoặc `Api` cho các nhu cầu dữ liệu cụ thể.
|
|
10
|
+
|
|
9
11
|
## Tính năng chính
|
|
10
12
|
|
|
11
13
|
- **Chuyển đổi Tự động** — tự động xử lý phân tích và chuyển đổi chuỗi JSON cho các cấu hình và đối tượng được lưu trữ.
|
|
12
14
|
- **Bộ nhớ đệm Dựa trên Thời gian** — cho phép lưu các đối tượng cùng với mốc thời gian và tôn trọng các ràng buộc về tuổi đời (age) của dữ liệu trong quá trình truy xuất.
|
|
13
15
|
- **Quản lý Tiền tố** — hỗ trợ cả tiền tố toàn cục và riêng biệt để cách ly cũng như gom nhóm các khóa trong `localStorage`.
|
|
14
|
-
- **Tối ưu
|
|
16
|
+
- **Tối ưu Bộ nhớ** — tạo ra các singleton cho những khóa giống nhau nhằm tránh các thao tác đọc đĩa bị lặp lại.
|
|
17
|
+
- **Hỗ trợ SSR** — sử dụng cơ chế cách ly theo từng request trong quá trình render phía server để ngăn chặn rò rỉ dữ liệu giữa các phiên làm việc song song.
|
|
15
18
|
|
|
16
19
|
## Khởi tạo
|
|
17
20
|
|
|
18
21
|
Để khởi tạo đối tượng, hãy gọi hàm khởi tạo `DataStorage(name, isSession)`.
|
|
19
22
|
|
|
23
|
+
### Ràng buộc Generic (Generic Constraints)
|
|
24
|
+
|
|
25
|
+
Lớp hỗ trợ generic sau để đảm bảo kiểm soát kiểu dữ liệu nghiêm ngặt cho giá trị được lưu trữ:
|
|
26
|
+
- `T` — Kiểu dữ liệu của giá trị được lưu trữ.
|
|
27
|
+
|
|
20
28
|
**Tham số:**
|
|
21
29
|
- `name: string` — tên của khóa lưu trữ.
|
|
22
30
|
- `isSession: boolean = false` — có sử dụng `sessionStorage` hay không (mặc định là `localStorage`).
|
|
23
31
|
|
|
24
32
|
```typescript
|
|
25
|
-
import { DataStorage } from '@dxtmisha/functional'
|
|
33
|
+
import { DataStorage } from '@dxtmisha/functional-basic'
|
|
26
34
|
|
|
27
35
|
// 1. Tạo một thực thể cho localStorage
|
|
28
36
|
const settings = new DataStorage('settings')
|
|
@@ -31,25 +39,31 @@ const settings = new DataStorage('settings')
|
|
|
31
39
|
const session = new DataStorage('user_session', true)
|
|
32
40
|
```
|
|
33
41
|
|
|
34
|
-
##
|
|
42
|
+
## Các phương thức
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
### Truy cập Bộ lưu trữ
|
|
37
45
|
|
|
38
|
-
- `
|
|
46
|
+
- `get(defaultValue?: T | (() => T), cache?: number): T | undefined` — Truy xuất giá trị hiện được lưu trữ. Nếu thời gian cache được cung cấp, nó sẽ trả về `undefined` nếu dữ liệu đã quá hạn.
|
|
47
|
+
- `set(value?: T | (() => T)): T | undefined` — Thiết lập hoặc cập nhật giá trị trong cơ chế lưu trữ. Truyền `undefined` sẽ xóa mục đó.
|
|
48
|
+
- `remove(): this` — Xóa khóa tương ứng khỏi môi trường lưu trữ và thực thể trong bộ nhớ.
|
|
49
|
+
- `update(): this` — Buộc thực thể bộ nhớ phải đồng bộ hóa với dữ liệu thô hiện tại bên trong các Storage API vật lý.
|
|
39
50
|
|
|
40
|
-
|
|
51
|
+
### Cấu hình
|
|
41
52
|
|
|
42
|
-
|
|
53
|
+
- `static setPrefix(newPrefix: string): void` — Thay đổi tiền tố toàn cục áp dụng cho các thực thể mới. Tiền tố mặc định là `ui-storage`.
|
|
43
54
|
|
|
44
|
-
|
|
55
|
+
## SSR và Hydration
|
|
45
56
|
|
|
46
|
-
|
|
47
|
-
- `defaultValue?: T | (() => T)` — giá trị dự phòng được trả về nếu bên trong bộ lưu trữ trống rỗng.
|
|
48
|
-
- `cache?: number` — độ tuổi tối đa cho phép (tính bằng giây). Nếu dữ liệu đã cũ hơn mức này, nó sẽ cư xử như thể không có gì được lưu trữ.
|
|
57
|
+
Lớp `DataStorage` hoàn toàn tương thích với Server-Side Rendering (SSR). Nó sử dụng một registry đặc biệt để cách ly các instance giữa các HTTP request khác nhau trên server.
|
|
49
58
|
|
|
50
|
-
|
|
59
|
+
> Để tránh lỗi hydration (khi HTML render từ server khác với client), bạn nên gọi phương thức `get()` bên trong `useEffect` hoặc các hook chỉ chạy ở client. Trên server, `get()` sẽ luôn trả về `undefined` (hoặc `defaultValue`) vì `localStorage` không khả dụng.
|
|
51
60
|
|
|
61
|
+
## Ví dụ
|
|
62
|
+
|
|
63
|
+
### Sử dụng Giá trị Mặc định và Cache
|
|
52
64
|
```javascript
|
|
65
|
+
const settings = new DataStorage('user_settings')
|
|
66
|
+
|
|
53
67
|
// Lấy dữ liệu, trả về object rỗng nếu không tìm thấy
|
|
54
68
|
const currentSettings = settings.get({})
|
|
55
69
|
|
|
@@ -57,20 +71,11 @@ const currentSettings = settings.get({})
|
|
|
57
71
|
const cachedItem = settings.get(undefined, 60)
|
|
58
72
|
```
|
|
59
73
|
|
|
60
|
-
###
|
|
61
|
-
|
|
62
|
-
Thiết lập hoặc cập nhật một giá trị trong cơ chế lưu trữ.
|
|
63
|
-
|
|
64
|
-
**Tham số:**
|
|
65
|
-
- `value?: T | (() => T)` — giá trị muốn lưu. Việc truyền `undefined` sẽ loại bỏ mục đó khỏi kho lưu trữ.
|
|
66
|
-
|
|
67
|
-
**Trả về:** `T | undefined` — giá trị được lưu trữ.
|
|
68
|
-
|
|
74
|
+
### Đồng bộ hóa Thủ công
|
|
69
75
|
```javascript
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Các phương thức bổ sung
|
|
76
|
+
const storage = new DataStorage('shared_data')
|
|
74
77
|
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
// ... dữ liệu có thể đã thay đổi trong một tab khác hoặc phần khác của ứng dụng
|
|
79
|
+
storage.update() // Đồng bộ hóa bộ nhớ với ổ đĩa
|
|
80
|
+
console.log(storage.get())
|
|
81
|
+
```
|