Localstorag and htmllocalstorag of html 5

Localstorag and htmllocalstorag of html 5

With the development of our hardware technology, the functions of browsers have become more and more perfect, from the previous cookie to the current local cache mechanism, to the web storage, when using cookies in html4, there are some obvious limitations, such as the size limit, the cookie size limit is 4 k earlier, and the other is the bandwidth, the cookie is sent along with http, as a result, some of the bandwidth used for sending cookies will be wasted. The complexity of cookie operations is also very complex. To sum up, the new technology webstorage is born because of its operation. As its name implies, it stores data on the web, but the storage here is not stored on the server end, it is stored locally on the customer service end.

Divide our webstorage into two types: sessingstorage, which stores data in session objects. Specifically, when a user browses a website, from entering the website to closing the browser, the session object can be used to save any data that needs to be saved in a short time. Another method is localstorage, which is what we need to know. This method stores data in the client's local hardware. Even if our browser is closed, the stored data still exists, and we can continue to use it the next time we open the browser, which is very practical.

The following is an example:

First, we need to create a local web database:

Var db = openDatabase ("student", "1.0", "student table", 2*1024*1024, function (){});
Db. transaction (function (fx ){
Fx.exe cuteSql ("create table if not exists stu (id Real unique, name Text)", --------------------------- to check whether the table exists
[],
Function (fx, result ){
Alert ("table created successfully" + result );
},
Function (fx, error ){
Alert ("Table creation failed" + error );
}
);
});

 

After the local database is created successfully, you can add data to it:

Function fun (){
Db. transaction (function (fx ){
Fx.exe cuteSql ("insert into stu (id, name) values (?,?) ",
[1, 'lanveer'],
Function (fx, result ){
Alert ('add OK ')
},
Function (fs, err ){
Alert ('failing' + err. message );
}
)
})
}

Then we can perform the same operations as our database to view our data:

Function fun2 (){
Db. transaction (function (fx ){
Fx.exe cuteSql ("select * from stu ",
[],
Function (fx, result ){
Var len = result. rows. length;
Alert (len) // -- print the query result
Alert (result. rows. item (0). name)
Var tp = "<table> <tr> <th> NO. </th> <th> name </th> </tr>"
For (var I = 0; I <len; I ++ ){
Tp + = "<tr> <td>" + result. rows. item (I ). id + "</td> <td>" + result. rows. item (I ). name + "</td> </tr>"

}
Tp + = "</table>"
Document. getElementById ("show"). innerHTML = tp;
}, Function (fs, err ){
Alert ('query failed' + err. message)
}
)
})
}

In this step, we performed complex table creation operations and injected the retrieved data into the newly created table.

The next step is to add and delete the data.

Add a data entry:

DataBase. transaction (function (fx ){
Fx.exe cuteSql ("update stu set name =? Where id =? ", [" Name, "" id "],
Function (fx, result ){},
Function (fx, error ){
Alert ('Update failed: '+ error. message );
});
})

 

 

Delete a piece of data:

DataBase. transaction (function (fx ){
Fx.exe cuteSql ("delete from stu where id =? ",
[Id],
Function (fx, result ){},
Function (fx, error ){
Alert ('deletion failed: '+ error. message );
});
});
The above is the basic operation of localstorage that we need to know. It is nothing more than the operation that our database adds, deletes, modifies, and queries to our data. It is just a web application.