Published
Edited
Jul 4, 2021
Importers
1 star
Insert cell
Insert cell
Insert cell
viewof name = persist("name", Inputs.text({label: "Name", value: "Brian"}))
Insert cell
name
Insert cell
Insert cell
Insert cell
viewof secretMessage = persistEncrypted("secret-message", Inputs.text({label: "Secret message", type: "password", value: "this is a secret message"}))
Insert cell
secretMessage
Insert cell
Insert cell
Insert cell
key
Insert cell
newKey
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles:true}));
}
Insert cell
function persist(key, input) {
input.addEventListener("input", function (params) {
localStorage.setItem(key, input.value)
})
let stored = localStorage.getItem(key)
if (stored) {
set(input, stored)
}

return input
}
Insert cell
function persistEncrypted(key, input) {
// if no hash, skip the rest to avoid destroying existing content
if (hash == "") { return input }
input.addEventListener("input", function (params) {
encrypt(input.value).then(encrypted => {
localStorage.setItem(key, encrypted)
})
})
let encrypted = localStorage.getItem(key)
if (encrypted) {
decrypt(encrypted).then(decrypted => {
set(input, decrypted)
})
}

return input
}
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more