{"id":18926010,"url":"https://github.com/murshidazher/client-side-data-storage","last_synced_at":"2025-09-02T21:46:51.756Z","repository":{"id":104058596,"uuid":"375998718","full_name":"murshidazher/client-side-data-storage","owner":"murshidazher","description":"🚌   A workspace containing client-side data storage implementations","archived":false,"fork":false,"pushed_at":"2021-06-12T09:25:09.000Z","size":244,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-25T00:35:51.150Z","etag":null,"topics":["cache","cache-storage","client-side","data","indexeddb","localstorage","sessionstorage","storage","websql"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/murshidazher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-06-11T11:11:14.000Z","updated_at":"2021-06-14T13:58:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"f3d27987-798d-4a1c-98e6-15f844425361","html_url":"https://github.com/murshidazher/client-side-data-storage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/murshidazher/client-side-data-storage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murshidazher%2Fclient-side-data-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murshidazher%2Fclient-side-data-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murshidazher%2Fclient-side-data-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murshidazher%2Fclient-side-data-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/murshidazher","download_url":"https://codeload.github.com/murshidazher/client-side-data-storage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murshidazher%2Fclient-side-data-storage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273355646,"owners_count":25090825,"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","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cache","cache-storage","client-side","data","indexeddb","localstorage","sessionstorage","storage","websql"],"created_at":"2024-11-08T11:14:07.290Z","updated_at":"2025-09-02T21:46:51.709Z","avatar_url":"https://github.com/murshidazher.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [client-side-data-storage](https://github.com/murshidazher/client-side-data-storage)\n\n\u003e A workspace containing client-side data storage implementations. 🚌 🚌\n\n- client-side data storage - saving data inside the browser itself.\n- Check if your browser support the storage implementation using [caniuse](https://caniuse.com/).\n\n## Table of Contents\n\n- [client-side-data-storage](#client-side-data-storage)\n  - [Table of Contents](#table-of-contents)\n  - [Technologies](#technologies)\n  - [Cookies](#cookies)\n  - [HTML5 Web Storage](#html5-web-storage)\n  - [WebSQL](#websql)\n  - [IndexedDB](#indexeddb)\n    - [Transaction Modes](#transaction-modes)\n  - [IndexedDB Advance](#indexeddb-advance)\n    - [Creating Indexes](#creating-indexes)\n    - [Iterating using Cursor](#iterating-using-cursor)\n  - [License](#license)\n\n## Technologies\n\nDifferent storage technologies are available and each of the below listed technologies solves an individual problem,\n\n- `Cookies`\n- HTML5 WebStorage - `localStorage` and `sessionStorage`\n- WebSQL - SQL based storage.\n- IndexedDB - NoSQL based transactional storage.\n- Offline Storage\n\nThe pros are;\n\n- It improves performance\n- reduces the load on the server\n- Sandboxed - only a single origin can access the storage its assigned for.\n\n## Cookies\n\n\u003e Stores as `string` upto `4KB`.\n\n- Small data upto the size of 4KB, key-value pairs stored by the browser.\n- Cookies are stored as strings and sent to the server on every subsequent request.\n- Cookies are build as an extension of http protocol and because the http protocol is stateless.\n- Updating a cookie and only way to update a cookie is create a new cookie with the same name.\n- Deleting a cookie we need to update the cookie expiration time to a later or older time.\n\n```txt\n// cookie_name=cookie_value; expires=Sun, 16 Jul 3567 06:23:41 GMT; path=/; secure\n\nCookie = \"\n  key = value;\n  expires = date;\n  path = path; // to save on a specific place\n  domain = domain;\n  secure; // uses only https\n\"\n```\n\n## HTML5 Web Storage\n\n\u003e Stores as `key-value` pairs.\n\n- Before HTML5 Web Storage there was cookies but with a limited storage of 4KB. Moreover, they sent the cookies on every request hence slowing down.\n- Web storage attempts to provide client-side only storage with no interaction with server-side.\n- Web storage provides two different types of storage,\n  - `localStorage` - data isn't delete until the user manually deletes it  (persistent storage).\n  - `sessionStorage` - data stored in the SessionStorage is temporary and cleared if the browser is closed. It only saved for a browser session.\n- The main difference between these two types is the lifetime of the data not the functionality.\n- If we open two browser with the same domain, session storage will not be in persisted in the same storage but the local storage will be available.\n\n## WebSQL\n\n\u003e If you've enormous amount such that its not manageable by session storage or cookie. So we can only use the database.\n\n- WebSQL is a database located in the browser.\n- Before this we were only storing data as key-value pair but WebSQL uses table structure to store data. We can store more complex data and as many tables as we want.\n- WebSQL uses SQLite for storing data in the background as database engine.\n\n## IndexedDB\n\n\u003e Powerful, large-scale, transactional NoSQL database. ⚠️ Don't forget if you don't have large amounts of data, you shouldn't use database. If you do this the complexity of your application will be increased use local/session storage in this use-cases.  \n\n- If we wanted to manage large amount of data in client-side we could use the WebSQL but it was the first attempt to add a database to client-side.\n- The specification of WebSQL reached an impasse, because developer stopped using it due to it being tabular data and limited to SQL queries.\n- IndexedDB is a NoSQL database where every operation is `asynchronous`.\n- Asynchronous meaning that everything in Indexeddb is based on events. Since the database is event-driven, we need to catch the status of the events using the event-handler function.\n- Moreover, the data structure in Indexeddb is more flexible.\n- Its also a transactional database meaning we can rollback an operation if a query fails.\n- Indexing is available in the IndexedDB.\n- We use the `indexedDB` global object to create and maintain the database.\n- There are four things to be aware of when working with IndexedDB,\n  - `Objects` - stored as properties\n  - `Object Store` - just like table, we need create an object store to store the objects.\n  - `Indexes` - used to easily identify a given object.\n  - `Transactions` - ensures the database integrity\n  - `Cursor` - its a mechanism for iterating over multiple records in our database.\n- If we've to update something in the database then we need to increase the database version and then use `onupgradeneeded` event handler to update the database or any other structural changes to the database. The handler name itself is descriptive.\n- When we change the version then `onupgradeneeded` will be automatically triggered.\n- Decimal numbers are converted to integer in version hence we cant use decimal numbers as version numbers. So we need to clearly use integer numbers for versions.\n- We write our queries `onsuccess` handler.\n\n### Transaction Modes\n\n- `readonly` - can only read data from object store, (default) without any param is this mode for transaction.\n- `readwrite` - transaction is allowed to read, write, delete and modify data\n- `versionchange` - same functionality as read write but in addition can change indexes, delete object stores and more.\n\n## IndexedDB Advance\n\n\u003e Look into [Mozilla IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/openCursor)\n\n### Creating Indexes\n\n- Its main purpose is to increase the query execution time. Index is the same as indexes in books which makes search easier.\n\n### Iterating using Cursor\n\n- The cursor is used to iterate the database one by one.\n- `openKeyCursor` will only iterate over the keys\n- `openCursor` to get key and value.\n- See [limiting-queries](./29.limiting-queries/script.js) for pagination and limiting using cursor.\n- Key-range allows us to limit the cursor iterating range.\n  - `lowerBound`\n  - `upperBound`\n  - `open` - if we need to exclude the upperbound or lowerbound we will assign as `true`.\n\n## License\n\n[MIT](./LICENSE) © 2021 Murshid Azher.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurshidazher%2Fclient-side-data-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmurshidazher%2Fclient-side-data-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurshidazher%2Fclient-side-data-storage/lists"}