Can achieve simple local storage, refreshed page data will not be lost

1. The HTML code is as follows:
<body onload="loadAll()">
<div class="addDiv">
    <label for="user_name">A data:</label>
    <input type="text" id="user_name" name="user_name" class="text"/>
    <br/>
    <label for="mobilephone">Data 2:</label>
    <input type="text" id="mobilephone" name="mobilephone"/>
    <br/>
    <label for="mobilephone">The data of three:</label>
    <input type="text" id="company" name="company"/>
    <br/>
    <input type="button" onclick="save()" value="New"/>
</div>
<br/>
<div id="list">
</div>
</body>
Copy the code
2, CSS part: you can refer to, but also according to their favorite style to write.
.addDiv{
            border: 2px dashed #ccc;
            width:400px;
            text-align:center;
        }
th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
        }
td {
            border-right: 1px solid #C9DAD7;
            border-bottom: 1px solid #C9DAD7;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
Copy the code
3. JavaScript: The editing function is still being written, and it will be filled up in the later period.
// Open the database
var db = openDatabase('contactdb'.' '.'local database demo'.204800);

// Save data
function save(){
    var user_name = document.getElementById("user_name").value;
    var mobilephone = document.getElementById("mobilephone").value;
    var company = document.getElementById("company").value;
    // Create time
    var time = new Date().getTime();
    db.transaction(function(tx){
        tx.executeSql('insert into contact values(? ,? ,? ,?) ',[user_name,mobilephone,company,time],onSuccess,onError);
    });
}
// Callback function executed after successful SQL statement execution
function onSuccess(tx,rs){
    log("Operation successful");
    loadAll();
}
// Callback function executed after SQL statement execution failed
function onError(tx,error){
    log("Operation failed, failure message:"+ error.message);
}
// Retrieve all contacts stored in the sqlLite database
function loadAll(){
    var list = document.getElementById("list");
    db.transaction(function(tx){
        // If the table does not exist, create the table
        tx.executeSql('create table if not exists contact(name text,phone text,company text,createtime INTEGER)'[]);// Query all contact records
        tx.executeSql('select * from contact'[],function(tx,rs){
            if(rs.rows.length>0) {var result = "<table>";
                result += X. "< tr > < th > < / th > < th > data a < / th > < th > two < / th > < th > data three < / th > < th > create time < / th > < th > action < / th > < / tr >";
                for(var i=0; i<rs.rows.length; i++){var row = rs.rows.item(i);
                    // Convert the time and format the output
                    var time = new Date(a); time.setTime(row.createtime);var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                    // Assemble a table of row nodes
                    result += "<tr><td>"+(i+1) +"</td><td>"+row.name+"</td><td>"+row.phone+"</td><td>"+row.company+"</td><td>"+timeStr+< input type='button' value=' edit 'onclick='update()'/>+row.phone+")'/></td></tr>";
                }
                list.innerHTML = result;
            }else{
                list.innerHTML = "No data at present"; }}); }); }Date.prototype.format = function(format)
{
    var o = {
        "M+" : this.getMonth()+1.//month
        "d+" : this.getDate(),    //day
        "h+" : this.getHours(),   //hour
        "m+" : this.getMinutes(), //minute
        "s+" : this.getSeconds(), //second
        "q+" : Math.floor((this.getMonth()+3) /3),  //quarter
        "S" : this.getMilliseconds() //millisecond
    }
    if(/(y+)/.test(format)) format=format.replace(RegExp. $1,this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)if(new RegExp("("+ k +")").test(format))
        format = format.replace(RegExp. $1,RegExp.$1.length==1 ? o[k] :
                ("00"+ o[k]).substr((""+ o[k]).length));
    return format;
};
// Delete contact information
function del(phone){
    db.transaction(function(tx){
        // Notice what needs to be shown here to convert the passed parameter phone to a string type
        tx.executeSql('delete from contact where phone=? '[String(phone)],onSuccess,onError);
    });
}
// Edit contact information
function update(){}Copy the code