반응형
크롬이 기본으로 개발자 도구를 지원해주고 있었다.
구글은 정말 사랑할 수 밖에 없는 것 같다. 따로 추가 플로그인 같은걸 설치해주어야 할지 알았는데 크롬 설치시 기본적으로 내장되어 있다. 꾀 기능이 많아 보이는데 조금씩 알아가야 할 것 같다. (당장은 내가 웹 개발자가 아니니 쓸일은 없어보인다. -_-;)
단축키 : [CTRL] + [SHIFT] + J
위에는 HTML5에서 추가된 storage를 테스트하고 개발자 툴을 이용해서 저장된 storage를 확인한 것이다.
아래는 소스이다.
위에는 HTML5에서 추가된 storage를 테스트하고 개발자 툴을 이용해서 저장된 storage를 확인한 것이다.
아래는 소스이다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>storage</title>
<script>
window.onload=function(){
var removeBtn = document.getElementById("removeBt");
var addBtn = document.getElementById("addBt");
removeBtn.addEventListener("click", remove);
addBtn.addEventListener("click", add);
load();
}
function load(){
var list = document.getElementById("list");
list.innerHTML = "";
for(var i=0; i < localStorage.length; i++){
var key = localStorage.key(i);
list.options[list.options.length] =
new Option(localStorage[key], key);
}
}
function remove(){
var list = document.getElementById("list");
if(list.selectedIndex < 0){
return;
}
var selected = list.options[list.selectedIndex].value;
localStorage.removeItem(selected);
load();
}
function add(){
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
localStorage[key] = value;
load();
}
</script>
</head>
<body>
<h1>LocalStorage Test</h1>
<select id="list" size="5" style="width:100px"></select>
<button id="removeBt">remove</button>
<p>
key:<input type="text" id="key">-
value:<input type="text" id="value">
<button id="addBt">Add</button>
</p>
</body>
</html>
[Source 1] storage.html
아래는 HTML5에서 추가된 Indexed DB의 테스트 코드이다.
아래는 HTML5에서 추가된 Indexed DB의 테스트 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Database Test</title>
<script>
// open or create
var db = openDatabase("dbtest", "", "DB Test", 1024*1024);
db.transaction(function(tx){
tx.executeSql("create table if not exists m_tb "
+ "(_id integer primary key autoincrement,"
+ "name not null, phone not null)");
});
window.onload=function(){
var removeBtn = document.getElementById("removeBt");
var addBtn = document.getElementById("addBt");
removeBtn.addEventListener("click", remove);
addBtn.addEventListener("click", add);
load();
}
function load(){
db.transaction(function(tx){
tx.executeSql("select * from m_tb", [],
function(tx, rs){
var list = document.getElementById("list");
list.innerHTML = "";
var rows = rs.rows;
for(var i=0; i<rows.length;i++){
var row = rows.item(i);
list.options[list.options.length] =
new Option(row.name, row._id);
}
});
});
}
function remove(){
var list = document.getElementById("list");
if(list.selectedIndex < 0) return;
var selected = list.options[list.selectedIndex].value;
db.transaction(function(tx){
tx.executeSql(
"delete from m_tb where _id = ?",
[selected], function(){load();}
);
});
}
function add(){
var name = document.getElementById("name").value;
var value = document.getElementById("phone").value;
db.transaction(function(tx){
tx.executeSql("insert into m_tb (name, phone) " +
"values (?, ?) ", [name, value],
function(){
load();
}
);
});
}
</script>
</head>
<body>
<h1>Database Test</h1>
<select id="list" size="5" style="width:100px"></select>
<button id="removeBt">remove</button>
<p>
Name : <input type="text" id="name">-
Phone : <input type="text" id="phone">
<button id="addBt">Add</button>
</p>
</body>
</html>
[Source 2] database.html
반응형
'Devlopment > Tip & Info' 카테고리의 다른 글
| 크롬 먹통 --no-sandbox 외의 해결 방법 (6) | 2018.02.20 |
|---|---|
| jboss ARJUNA-16027 오류 해결 방법 (1) | 2014.04.22 |
| 구글 애드몹 링크 (0) | 2013.06.10 |
| HTTP Live Streaming Tools (0) | 2012.10.16 |
| 서버 접속이 공인ip로는 되나 사설 ip로는 안될 경우 (0) | 2012.03.13 |
| 웹 브라우저 점유율을 보여주는 사이트 - 스탯카운터 (0) | 2011.06.13 |
| failed to load the jni shared library jvm.dll (1) | 2010.12.31 |
| 티맥스 기초적인 실수 (0) | 2010.05.20 |
| Probus에서 기존 서비스 변경시 주의사항 (0) | 2009.08.19 |
| 추천 사이트 (0) | 2009.04.24 |