https://github.com/try0/browser-tab-id
@try0/browser-tab-id generates IDs, stores them in sessionStorage, and helps minimize duplicates across tabs./IDを生成し、なるべく重複しないようsessionStorageで管理する
https://github.com/try0/browser-tab-id
browser-tab browser-tab-id id id-generator session
Last synced: about 2 months ago
JSON representation
@try0/browser-tab-id generates IDs, stores them in sessionStorage, and helps minimize duplicates across tabs./IDを生成し、なるべく重複しないようsessionStorageで管理する
- Host: GitHub
- URL: https://github.com/try0/browser-tab-id
- Owner: try0
- License: mit
- Created: 2025-08-14T14:04:50.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-08-31T00:22:38.000Z (6 months ago)
- Last Synced: 2025-08-31T02:30:46.798Z (6 months ago)
- Topics: browser-tab, browser-tab-id, id, id-generator, session
- Language: TypeScript
- Homepage: https://try0.github.io/browser-tab-id/
- Size: 104 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.ja.md
- License: LICENSE
Awesome Lists containing this project
README
# browser-tab-id
[English](./README.md) | [日本語](./README.ja.md)
時間 + ランダム数字 + インクリメント でIDを生成して、タブ間でなるべく重複しないようsessionStorageで管理します。
```
{timestamp}_{random}_{counter}
1755313540998_87226662_0001
```
* インクリメント部は、[Web Locks API](https://developer.mozilla.org/ja/docs/Web/API/Web_Locks_API)が使える環境であれば、ロックを取得してインクリメント。
* window.openerがあれば、sessionStorageを直接確認。
* 別タブとイベントやり取りで重複チェック。
## Usage
[npm](https://www.npmjs.com/package/@try0/browser-tab-id)
```
npm i @try0/browser-tab-id
```
最小構成
```JS
const tabId = await BrowserTabId.initialize();
```
全オプション
```JS
const tabId = await BrowserTabId.initialize({
tabIdKey: "btid", // sessionStorageのキー。他プレフィックスとして使用。
randomDigits: 8, // ランダム数値部桁数。0で省略。
duplicateCheckWaitTime: 600, // 他タブへの重複チェックにかける待機時間ミリ秒。
cycleCounterDigits: 4, // インクリメント数値部桁数。0で省略。桁超えると最初に戻る。
cycleCounterType: "indexed-db", // リングカウンターの記録ストア。 or local-storage。indexed-db使用不可時はlocal-storageへフォールバック。
channels: ["broadcast-channel", "local-storage"], // 他タブへの問い合わせ方法。broadcast-channel使用不可時はlocal-storageへフォールバック。
decorate: (idSrc) => [idSrc.timestampString, idSrc.randomString, idSrc.cycleCountString].join("_"), // フォーマットの変更。ランダム・カウンター部は0埋めの文字列。
debugLog: false, // デバッグ用ログ。
});
```
TypeScript
```ts
import BrowserTabId , { type BrowserTabIdOption, type TabIdStringSource } from '@try0/browser-tab-id'
const btOption: BrowserTabIdOption = {
}
const tabId: string = await BrowserTabId.initialize(btOption);
```
既存のID生成ロジックへの移譲
```JS
const tabId = await BrowserTabId.initialize({
decorate: (idSrc) => ulid()
});
```
CDNから直
```
```
```
```
## デモ
[Sample](https://try0.github.io/browser-tab-id/index.html)