Skip to content

Instantly share code, notes, and snippets.

@masamitsu-konya

masamitsu-konya/file0.html

Created April 22, 2014 04:53
Show Gist options
  • Save masamitsu-konya/11165692 to your computer and use it in GitHub Desktop.
Save masamitsu-konya/11165692 to your computer and use it in GitHub Desktop.
Download ZIP
LocalStorageをもっとデータベースライクに使う方法 ref: http://qiita.com/masamitsu-konya/items/ce7f6469434076448238
Raw
file0.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebStrage API</title>
<script type="text/javascript">
function init() {
//ここにコードを書いていきます
}
</script>
</head>
<body onload="init()">
<form id="form">
<label for="name">
名前
<input type="text" name="name" id="name">
</label>
<label for="name">
人種
<input type="text" name="category" id="category">
</label>
<label for="name">
強さ
<input type="text" name="strength" id="strength">
</label>
<div id="result"></div>
</form>
</html>
Raw
file0.txt
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebStrage API</title>
<script type="text/javascript">
function init() {
//ここにコードを書いていきます
}
</script>
</head>
<body onload="init()">
<form id="form">
<label for="name">
名前
<input type="text" name="name" id="name">
</label>
<label for="name">
人種
<input type="text" name="category" id="category">
</label>
<label for="name">
強さ
<input type="text" name="strength" id="strength">
</label>
<div id="result"></div>
</form>
</html>
Raw
file1.js
function init() {
document.querySelector("#form").addEventListener("input",
function() {
var data = {
name:document.querySelector("#name").value,
category:document.querySelector("#category").value,
strength:document.querySelector("#strength").value
};
localStorage.setItem("goku", JSON.stringify(data));
}, false
);
}
Raw
file1.txt
function init() {
document.querySelector("#form").addEventListener("input",
function() {
var data = {
name:document.querySelector("#name").value,
category:document.querySelector("#category").value,
strength:document.querySelector("#strength").value
};
localStorage.setItem("goku", JSON.stringify(data));
}, false
);
}
Raw
file2.js
・・・・・
localStorage.setItem("goku", JSON.stringify(data));
var nowData = localStorage.getItem("goku");
var realData = JSON.parse(nowData);
val = realData.name + " " + realData.category + " " + realData.strength;
document.querySelector("#result").innerHTML = val;
・・・・・
Raw
file2.txt
・・・・・
localStorage.setItem("goku", JSON.stringify(data));
var nowData = localStorage.getItem("goku");
var realData = JSON.parse(nowData);
val = realData.name + " " + realData.category + " " + realData.strength;
document.querySelector("#result").innerHTML = val;
・・・・・
Raw
file3.js
function init() {
var oldData = localStorage.getItem("goku");
if(oldData) {
var realData = JSON.parse(oldData);
document.querySelector("#name").value = realData.name;
document.querySelector("#category").value = realData.category;
document.querySelector("#strength").value = realData.strength;
}
document.querySelector("#form").addEventListener("input",
・・・・・
Raw
file3.txt
function init() {
var oldData = localStorage.getItem("goku");
if(oldData) {
var realData = JSON.parse(oldData);
document.querySelector("#name").value = realData.name;
document.querySelector("#category").value = realData.category;
document.querySelector("#strength").value = realData.strength;
}
document.querySelector("#form").addEventListener("input",
・・・・・
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment