{"id":18941604,"url":"https://github.com/bahrus/ob-session","last_synced_at":"2026-05-05T03:38:44.255Z","repository":{"id":65467319,"uuid":"162900038","full_name":"bahrus/ob-session","owner":"bahrus","description":"Make storing objects in SessionStorage easier and faster.","archived":false,"fork":false,"pushed_at":"2024-04-17T21:29:03.000Z","size":209,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T10:17:36.964Z","etag":null,"topics":["sessionstorage","web-component","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahrus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-23T14:57:59.000Z","updated_at":"2024-03-30T20:28:18.000Z","dependencies_parsed_at":"2024-04-01T22:27:01.768Z","dependency_job_id":"f82e864e-2c1d-4a3c-9b60-f9c067d015cb","html_url":"https://github.com/bahrus/ob-session","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"38a4ed95c88c8e9133f47a2ce205af1cf14ed8f0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fob-session","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fob-session/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fob-session/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fob-session/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahrus","download_url":"https://codeload.github.com/bahrus/ob-session/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239942756,"owners_count":19722330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["sessionstorage","web-component","web-components"],"created_at":"2024-11-08T12:28:41.398Z","updated_at":"2026-03-23T21:30:19.290Z","avatar_url":"https://github.com/bahrus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ob-session\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ob-session)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/ob-session?style=for-the-badge)](https://bundlephobia.com/result?p=ob-session)\n[![NPM version](https://badge.fury.io/js/ob-session.png)](http://badge.fury.io/js/ob-session)\n\u003cimg src=\"http://img.badgesize.io/https://cdn.jsdelivr.net/npm/ob-session?compression=gzip\"\u003e\n[![Playwright Tests](https://github.com/bahrus/ob-session/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/ob-session/actions/workflows/CI.yml)\n\nob-session is a form-associated web component that makes accessing SessionStorage declarative, and adds support for JSON objects.  It can act as a \"web component as a service\" within a \"web component organism\".\n\nIt can also serve as a base class that can be given a semantic name on the fly, with the help of [be-obsessed](https://github.com/bahrus-be-obsessed), that is actually used as the key for where to find the object:\n\n```html\n\u003cuser-preferences be-obsessed onchange\u003e\u003c/user-preferences\u003e\n```\n\nBecause we are allowing pure HTML markup to do things that could have potentially nasty side effects, just in case, this component insists that the onchange attribute be present, in order to do anything.  The choice of onchange isn't arbitrary.  The component actually emits event \"change\" when the key it is monitoring for changes in value in sessionStorage.  So we can in fact add code in the onchange event attribute that does something when that happens.\n\n## In good company\n\nWebsites that appear to store objects in session storage:\n\n1.  Twitter.com\n2.  Amazon.com\n3.  Walmart.com\n4.  CNN.com\n5.  WashingtonPost.com\n6.  TypescriptLang.org\n7.  WSJ.com\n\n## Why focus on Session Storage?\n\nWhereas one could argue that local storage is being eclipsed by helper libraries based on Indexed DB, session storage serves a particular niche -- In some [lines of business](https://www.securityevaluators.com/casestudies/industry-wide-misunderstandings-of-https/), caching business data in the client, even after the browser window / tab closes, runs afoul of audits. The navigation entries and sessionStorage don't appear to raise such concerns. \n\n## API\n\nThe api supports an init(win: Window) function, where you can pass in a window (say, from an iframe).  init() is immediately called on the window that references the api.\n\nOnce init is called, just call setItem(key, stringOrJsonSerializableObject), getItem(key), removeItem(key) from the window object.\n\nTo listen for any updates to sessionStorage, use:\n\n```JavaScript\nwin.addEventListener('session-storage-item-set', e =\u003e {\n    console.log(e.oldValue, e.newValue, e.key);\n});\nwin.addEventListener('session-storage-item-removed', e =\u003e {\n    console.log(e.oldValue, e.key);\n});\n```\n\nwhere \"win\" is a local variable shortcut pointing to the (iframed) window object.\n\nCustom element [properties/attributes reference](https://cf-sw.bahrus.workers.dev/?href=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fob-session%400.0.10%2Fcustom-elements.json\u0026stylesheet=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Fsimple-ce-style.css\u0026embedded=false\u0026tags=\u0026ts=2024-04-17T21%3A24%3A36.667Z\u0026tocXSLT=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Ftoc.xsl)\n\n## Viewing Demos Locally\n\nAny web server that can serve static files will do, but...\n\n1.  Install git.\n2.  Fork/clone this repo.\n3.  Install node.js.\n4.  Open command window to folder where you cloned this repo.\n5.  \u003e npm install\n6.  \u003e npm run serve\n7.  Open http://localhost:3030/demo/ in a modern browser.\n\n\u003c!--## Running Tests\n\n```\n\u003e npm run test\n```\n--\u003e\n## Using from ESM Module:\n\n```JavaScript\nimport 'ob-session/ob-session.js';\n```\n\n## Using from CDN:\n\n```html\n\u003cscript type=module crossorigin=anonymous\u003e\n    import 'https://esm.run/ob-session';\n\u003c/script\u003e\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fob-session","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahrus%2Fob-session","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fob-session/lists"}