日期:2014-05-16  浏览次数:20583 次

html5 localStorage sessionStorage Database 实例

?

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="Add" class='J-add'/>
    <input type="button" value="removeItem" class='J-delete'/>
    <input type="button" value="Modify" class='J-modify'/>
    <input type="button" value="Select" class='J-select'/>
    <input type="button" value="removeAll" class='J-removeAll'/>

    <input type="button" value="create_db" id='create_db'/>
    <script type="text/javascript" src='jquery.js'></script>
    <script type="text/javascript">
        var s = 3;
        $('.J-add').click(function(){
                var key = s++;
                var value = {'name':'jlq','age':21};
				alert("aa");
                localStorage.setItem(s,JSON.stringify(value));//增加一条
                })
        $('.J-removeAll').click(function(){
                localStorage.clear();//清空所有数据
                })
        $('.J-delete').click(function(){
                localStorage.removeItem(3);//删除一条数据
                })
        $('.J-modify').click(function(){
                localStorage.setItem(0,'hello');//一条修改数据
                });
        $('.J-select').click(function(){
                var val = localStorage.getItem(4);//获取一条数据
                alert(val);
                })
	   $('#create_db').click(function(){

	       var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
		   db.transaction(function (tx) {      
		         tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
		         tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
          //这样 val   ==>undefined
			//	var val =  tx.executeSql('SELECT log from LOGS where id = 2');
			//   alert(val);
			
		   });
		 

	   
	   })

    </script>
</body>
</html>