2c:null 2d:["$","title",null,{"children":"Save configuration to localstorage | Teilnehmer | Observable"}] 32:T1739,storable = (view_, keyOrOptions, options = {}) => { validate( view_ instanceof HTMLElement, 'View is not an HTMLElement. Did you forget to include the `viewof` keyword when passing to `storable`?' ) const defaultKey = getNotebookKey() const options_ = { renderValue: inspect, stringify: JSON.stringify, parse: JSON.parse, key: (typeof keyOrOptions === 'string') ? keyOrOptions : defaultKey, ...((typeof keyOrOptions === 'object') ? keyOrOptions : options), } // Check option types ;[ ['renderValue', 'function'], ['stringify', 'function'], ['parse', 'function'], ['key', 'string'] ].forEach(([key, type]) => validate(typeof options_[key] === type, `options.${key} must be a ${type}`)) const state = { // Should be synced to the input field name: '', // Should be synced to localStorage[key] currentList: [], } // Stringify state.currentList and save to localstorage. Note that each value is separately // stringified using options._stringify and then the entire array is strinigified using the // native JSON.stringify, to allow user configuration of the individual stringification process const syncToLocalStorage = () => { localStorage.setItem( options_.key, JSON.stringify(state.currentList.map(([n, v], i, arr) => [n, options_.stringify(v, i, arr)])) ) } // Parse the list of saved configurations from localStorage and put in state.currentList // This is the reverse process of syncToLocalStorage const syncFromLocalStorage = () => { const stringList = localStorage.getItem(options_.key) if (!stringList) { state.currentList = [] return } state.currentList = JSON.parse(stringList).map(([n, vstring], i, arr) => [n, options_.parse(vstring, i, arr)]) } // Pull from localstorage and rerender the table body to match const update = () => { // Pull from localstorage syncFromLocalStorage() // Rerender the table body const tbody = saveInterface.querySelector('tbody[data-currentlist]') tbody.replaceChildren(...renderCurrentList()) } // When the input field is updated, sync state.name const handleNameInput = e => { state.name = e.target.value if (state.name !== '') { saveInterface.querySelector('button[data-savebutton]').disabled = false } else { saveInterface.querySelector('button[data-savebutton]').disabled = true } } // Add the current value to state.currentList, then push to localStorage const handleSave = e => { e.preventDefault() // If the name field is blank, don't save if (state.name == '') return // Push the current config to the current list state.currentList.push([state.name, view_.value]) // Write list to localstorage syncToLocalStorage() update() // Clear the name field saveInterface.querySelector('input[data-nameinput]').value = '' state.name = '' } // Factory that generates a handler function which removes the item // at index i from state.currentList and then pushes to localStorage const handleDeleteFactory = i => { return e => { state.currentList.splice(i, 1) syncToLocalStorage() update() } } // Factory that generates a handler function which backwrites // the value at index i in state.currentList to the view const handleApplyFactory = i => { return e => { e.preventDefault() const [name, value] = state.currentList[i] view_.value = value view_.dispatchEvent(new Event('input')) } } // Handler that listens for changes to the view and updates the "new item" // row in the table. We don't get this automatically because `viewof view`, // which is the first argument to `storable` doesn't trigger reevaluation // when `view` changes in Observable const handleViewInput = () => { saveInterface.querySelector('td[data-currentvalue]').replaceChildren( htl.html.fragment`${options_.renderValue(view_.value)}` ) } // We bind the listener immediately to the view view_.addEventListener('input', handleViewInput) // Template for the table rows const renderCurrentList = () => state.currentList.map(([name, value], i, arr) => htl.html.fragment` ${name} ${options_.renderValue(value, i, arr)} `) // We need to sync from localStorage once before rendering syncFromLocalStorage() // Render the whole table! const saveInterface = htl.html`

${renderCurrentList()}

Name (click to restore)	Value
Name	${options_.renderValue(view_.value)}

` return saveInterface }33:[] 30:{"id":"5131c2919090f37f","slug":null,"title":"Save configuration to localstorage","thumbnail":"a35731a4944b33cbf136be7188f8f82f26b883acf575f5daaedd61b8ba50a00a","access_level":"public","create_time":"$D2023-04-06T13:23:14.964Z","update_time":"$D2023-04-06T13:48:17.231Z","view_time":null,"first_public_time":"$D2023-04-06T13:23:14.964Z","has_unpublished_edits":null,"fork":{"id":"7dfdfd3bce1027a8","slug":"save-to-localstorage","title":"Save configuration to localstorage","owner":{"id":"3587ecfe3e28cf64","login":"harrislapiroff","name":"Harris Lapiroff"}},"stars":1,"starred":false,"owner":{"type":"team","id":"289d5beabf8c6f70","login":"ritterrbc","name":"Teilnehmer","avatar_url":"https://avatars-next.observableusercontent.com/b313f0289d40bb371cad1a104348f7971cd71cccdc6d5698b1c5251fc3927dce","tier":"starter_2024"},"version":582,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e61d5d6da462274","login":"ritterrbc","name":"Teilnehmer","avatar_url":"https://avatars-next.observableusercontent.com/b313f0289d40bb371cad1a104348f7971cd71cccdc6d5698b1c5251fc3927dce","tier":null}],"members":[{"type":"individual","id":"4e61d5d6da462274","login":"ritterrbc","name":"Teilnehmer","avatar_url":"https://avatars-next.observableusercontent.com/b313f0289d40bb371cad1a104348f7971cd71cccdc6d5698b1c5251fc3927dce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Save configuration to localstorage","cells":[{"id":0,"value":"# Save configuration to `localstorage`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"Sometimes you have a notebook with a lot of widgets. You want a visitor to be able to fiddle with some configuration and save it to retrieve later. Maybe you even want them to be able to store _multiple_ configuration sets and flip between them. That's where `storable` comes in!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"toc({\n title: null,\n headers: 'h2, h3',\n hideStartingFrom: 'Errors'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"## Basic Usage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"Recommended to use in combination with [@tomlarkworthy/view](https://observablehq.com/@tomlarkworthy/view). First import both (in separate cells):\n\n~~~js\nimport { storable } from \"@harrislapiroff/save-to-localstorage\"\n\nimport { view } from \"@tomlarkworthy/view\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"Next, define a view:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof contactDetails = view`\n ${['Name', Inputs.text({ label: 'Name' })]}\n ${['Email', Inputs.text({ label: 'Email' })]}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"Then, render the storable interface. The function signature is:\n\n~~~js\nstorable(view[, key][, options])\n~~~\n\nMake sure to include the `viewof` keyword when passing the view into `storable`. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"storable(viewof contactDetails)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"Try to store some different input values from the form above—make sure to give them names first. Notice that they persist across page refreshes and browser relaunches. (Unless you have `localstorage` disabled, in which case they do not.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"## Customization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"### Unique Key\n\n`storable` requires a unique key to use as the `localStorage` key. By default it will use a key based on the current notebook URL. For example, for this notebook, the unique key is:\n\n~~~\n${getNotebookKey()}\n~~~\n\nand saved data is stored in `localStorage['${getNotebookKey()}']`. This will work for most use cases, but has a few downsides:\n\n1. If you have multiple `storable`s in a notebook, they will share data, by default, which could cause unexpected behavior\n2. If you view the notebook at a different URL (e.g., using the **compare** and **history** views) those will have their own independent data storages\n3. If your notebook URL changes (either because you publish it or change the slug after publishing it) the key will change and your `storable` will reset to empty\n\nIf you need to avoid either of those pitfalls, you may pass a custom key in as the second argument. Saved data will then be stored in `localStorage[customKey]`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"viewof text = Inputs.text({ label: 'Just some text' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"storable(viewof text, 'different-key')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"### Custom Value Rendering\n\nYou can change how storables render values in table. By default they use [`inspect`](https://observablehq.com/@observablehq/inspector), but you can change this by passing in an `options` object with a `renderValue` property:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"viewof config = view`${[\n \"colors\",\n d3\n .range(0, 6)\n .map((i) =>\n Inputs.color({ value: d3.hsl(60 + i * 130, 0.9, 0.6).formatHex() })\n )\n]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"storable(\n viewof config,\n 'storable-example-colors',\n {\n renderValue: (v, i, arr) => v.colors.map(\n c => htl.html.fragment`

${c}

`\n )\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"You can also pass in options for `stringify` and `parse` which are functions that define how each value gets serialized and deserialized when being stored in or retrieved from `localStorage`. These default to `JSON.stringify` and `JSON.parse`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"Forgetting the `viewof` keyword when passing in the view:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"## Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"truncate = (str, length = 50, ellipsis = '…') => str.length > length ? str.substring(0, length) + ellipsis : str","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"getNotebookKey = () => new URL(document.baseURI).pathname.substring(1).replace('/', '-')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"validate = (condition, error) => {\n if (!!condition) return\n throw error\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"import {inspect} from \"@observablehq/inspector\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"