When talking about local storage, We Have To Say That cookies are usually used in web applications to store simple data on the client, such as user information and judgment fields. However, Cookie storage has many drawbacks, such:
1. Each HTTP request will be appended with a long cookie string sent to the server and then returned to the client by the server, consuming bandwidth
2. The size of the cookie storage is limited. Some browsers have 8192 bytes, and some have only 4096 bytes.
3. If you disable cookies, the function will become invalid.
4. Potential Security: data stored on the client is prone to tampering.
HTML5 improves cookie deficiencies through webstorage and database.
1. The size of webstorage is about 5 MB, which is not restricted in Firefox.
2. The data lifecycle can be refreshed on the Cross-origin page, or even disabled and re-opened by the browser.
Localstorage and sessionstorage
Localstorage refers to storing data in a local hard disk. In Chrome, you can see the storage of the local storage resource. It is permanent unless it is deleted manually.
Sessionstorage refers to storing data in the session object. The data lifecycle is the same as that of the session object (the process of closing a website on a browser ).
You can delete and modify data records (localstorage is the same as sessionstorage ):
<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'/>
<SCRIPT type = "text/JavaScript" src = 'js/jquery-1.6.2.min.js '> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR S = 3;
$ ('. J-add'). Click (function (){
Var key = s ++;
VaR value = {'name': 'jq1', 'age': 21 };
Localstorage. setitem (S, JSON. stringify (value); // Add
})
$ ('. J-removeall'). Click (function (){
Localstorage. Clear (); // clear all data
})
$ ('. J-delete'). Click (function (){
Localstorage. removeitem (3); // delete a piece of data
})
$ ('. J-Modify'). Click (function (){
Localstorage. setitem (0, 'Hello'); // modify data one by one
});
$ ('. J-select'). Click (function (){
Var val = localstorage. getitem (4); // get a piece of data
Alert (VAL );
})
</SCRIPT>
</Body>
</Html>
Local Database
The browser uses the built-in small file-type SQL database for local storage, which is commonly seen as "sqllite ".
VaR DB = opendatabase ("DB name", "version number", "DB description", "database size"); // creates a database. If the database already exists, the database object is returned.
DB. Transaction (function (TX ){
Tx.exe cutesql ("SQL statement", [], handledata, handleerror );
// Transaction operation
})
Handledata (TX, RS ){
// Do something
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
