{"id":19238296,"url":"https://github.com/olical/hashstorage","last_synced_at":"2025-06-22T16:36:59.443Z","repository":{"id":2706638,"uuid":"3700553","full_name":"Olical/HashStorage","owner":"Olical","description":"Watches the URLs hash for changes and merges those changes with an existing object, allowing storage of complex data in a sharable URL","archived":false,"fork":false,"pushed_at":"2012-03-24T12:19:19.000Z","size":120,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T13:52:23.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Olical.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}},"created_at":"2012-03-12T22:08:01.000Z","updated_at":"2015-11-11T14:02:31.000Z","dependencies_parsed_at":"2022-09-19T01:40:41.024Z","dependency_job_id":null,"html_url":"https://github.com/Olical/HashStorage","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Olical/HashStorage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Olical%2FHashStorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Olical%2FHashStorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Olical%2FHashStorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Olical%2FHashStorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Olical","download_url":"https://codeload.github.com/Olical/HashStorage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Olical%2FHashStorage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261326317,"owners_count":23142055,"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":[],"created_at":"2024-11-09T16:30:32.517Z","updated_at":"2025-06-22T16:36:54.432Z","avatar_url":"https://github.com/Olical.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HashStorage\n\nA small JavaScript class that allows you to store complex data in the URLs hash. So you could link someone to this page and instantly point the users browser at the correct slide and scroll position.\n\n    http://yoursite.co.uk/slideshow#{\"page\":3,\"scrollX\":324}\n\nIf you did use it for a slideshow of some kind and you were on page 3 for example, you would set your \"Next page\" links `href` to `#{\"page\":4}`. So when the user clicks it you perform your slideshows page change and HashStorage will update the hash in the URL to allow the user to copy and paste that link into whatever they want.\n\nAs you can see, I have also included a `scollX` property in that example URL. To set this value without the user having to click a link you can use the `set` method. In this instance it would work like this.\n\n\t// Initialise the instance of HashStorage\n\tvar hs = new HashStorage();\n\t\n\t// Get the current scroll position first...\n\t// You may want to use a JavaScript library like MooTools or jQuery for this kind of thing\n\t// We will pretend we stored the value in `currentScrollPosition`\n\t\n\t// Now set it\n\ths.set({\n\t\tscrollX: currentScrollPosition\n\t});\n\n## Compatibility\n\nHashStorage will work perfectly in all modern browsers including IE8. Any browsers older than that do not include the `hashchange` event making it basically impossible to check for without using timers.\n\n * Firefox\n * Chrome\n * Safari\n * Opera\n * IE8+\n\n## Documentation\n\n### Loading\n\nThere are a couple of ways to load HashStorage. The first and most obvious is to point a script tag at it.\n\n\t\u003cscript type='text/javascript' src='/assets/javascript/HashStorage.min.js'\u003e\u003c/script\u003e\n\t\u003cscript type='text/javascript'\u003e\n\t\tvar hs = new HashStorage();\n\t\u003c/script\u003e\n\nYou can also load the script via AMD with [RequireJS](http://requirejs.org/) for example.\n\n\tdefine(['HashStorage'], function(HashStorage) {\n\t\tvar hs = new HashStorage();\n\t});\n\nAs you can see I am also creating an instance of `HashStorage` when it is loaded, this is required for it to function. When you create an instance all of the required events are registered with the browser.\n\n### Manipulating with links\n\nYou can easily edit the hash object with HTML links, here is an example.\n\n\t\u003ca href='#{\"messageSent\":true}'\u003eSend the message\u003c/a\u003e\n\nThats it. When a user clicks your link the hash object will be updated with the new boolean, `messageSent`. You can then add more values like this.\n\n\t\u003ca href='#{\"volume\":0}'\u003eMute volume\u003c/a\u003e\n\nIf a user clicks both of these links then the hash object will contain both variables. This is because the old and new objects are merged recursively. That means you can overwrite deeply nested values if you require. Here is an example of nested objects.\n\n\t\u003ca href='#{ \"music\": { \"volume\": 3, \"file\": \"sound.mp3\" } }'\u003eStart\u003c/a\u003e\n\t\u003ca href='#{ \"music\": { \"file\": \"newSound.mp3\" } }'\u003eChange song\u003c/a\u003e\n\nA user can click the first and then the second links. The volume will stay the same but the file will be overwritten.\n\n### Manipulating with JavaScript\n\nSometimes you may want to update the hash programmatically, such as when the user scrolls or a video finishes. You can do this easily with the `set` method. It works exactly the same as the link method so the objects will be merged not overwritten. The following example assumes that you have already created an instance of `HashStorage` called `hs`.\n\n\t// Change the volume from the previous example\n\ths.set({\n\t\tmusic: {\n\t\t\tvolume: 8\n\t\t}\n\t});\n\n### Accessing the stored data\n\nTo access the hash object simply use the data property. So assuming you have created an instance of `HashStorage` called `hs`, you can access data from the above examples like so.\n\n\tvar volume = hs.data.music.volume;\n\n## License\n\n[![Creative Commons License](http://i.creativecommons.org/l/by/3.0/88x31.png)](http://creativecommons.org/licenses/by/3.0/)\n\nHashStorage by [Oliver Caldwell](http://oli.me.uk) is licensed under a [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folical%2Fhashstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folical%2Fhashstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folical%2Fhashstorage/lists"}