Skip to content

Instantly share code, notes, and snippets.

@SamEureka

SamEureka/app.js

Last active September 8, 2022 13:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SamEureka/d62777e20b715bca8249 to your computer and use it in GitHub Desktop.
Save SamEureka/d62777e20b715bca8249 to your computer and use it in GitHub Desktop.
Download ZIP
Testing localStorage with d3
Raw
app.js
// refactored - combined the retreive and set to one function.
d3.select("#cText").on("input", function() {
localStorage.setItem('cText', this.value);
d3.select('#textOut').text(localStorage.getItem('cText'));
});
d3.select("#nRange").on("input", function() {
localStorage.setItem('nRange', +this.value);
d3.select('#rangeOut').text(localStorage.getItem('nRange'));
});
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing localStorage with d3 </title>
</head>
<body>
<div>
<h2>Check local storage to see data change</h2>
<label for="cText">Text Input</label>
<input type="text" id="cText">
<br/>
<br>
<label for="nRange">Range Input</label>
<input type="range" min="1" max="200" id="nRange">
</div>
<div>
<br>
<span>Text read from localStorage</span><div id="textOut"></div>
<br>
<span>Range read from localStorage</span><div id="rangeOut"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment