Summary client data storage

Summary

What is client data storage?

Simply put, data is stored on a specific client, reducing the number of requests to the server.

Why is client data storage required?

In the response time, the time taken by the http request response cannot be underestimated. Therefore, reducing http requests can improve user experience and reduce the chance of exceptions.

How to use client data storage?

In my limited knowledge, client data storage is divided into two types: access to data on the same page, and access to cross-page data storage.

Same page Data Access

I know the same page data storage has five types (the script library uses jquery-1.6 ):

The first method is to useAccess Data

Take $ ("# cds1"). val () Storage: $ ("# cds1"). val ('other data ').

The second is to use html custom attributes to access data.

 

Take $ ("# cds2"). attr ("val") Storage: $ ("# cds2"). attr ("val", "other data ");

The third method is to use the newly added attribute "data-youvalue" in html5.

 

$ ("# Cds3 "). data ("val") Storage: $ ("# cds3 "). data ("val", "other val"), note that if data-val has an initial value, $ ("# cds3 "). data ("val") will lose the previous 0. You can use $ ("# cds3 "). attr ("data-val") solves this problem. but if it is through $ ("# cds3 "). set data ("val", "001") and then use $ ("# cds3 "). data ("val") is not lost.

The fourth method is to add

 

The Code is as follows (the Code passes the test in ie [7 | 8 | 9] and an error is reported in ff4.0.1 ):

 
 

  
  
// set data  
  
  
var dS = document.getElementById("cds4");  
  
  
dS.setAttribute("name", "chen qi liang");  
  
  
dS.save("info");  
  
  
// get data  
  
  
dS.load("info");  
  
  
alert(dS.getAttribute("name"));  
  
  
// delete data  
  
  
dS.removeAttribute("name");  
  
  
dS.save("info"); 
 
 

The fifth method is to use the sessionStorage Code as follows (ie [7 | 8 | 9], ff4.0.1 passed the test ):

 
 

  
  
SessionStorage. name = "chen qi liang"; or sessionStorage. setItem ("name", "chen qi liang ")
  
  
Alert (sessionStorage. name); or alert (sessionStorage. getItem ("name "));
 
 

Cross-page Data Access

I know three methods.

The first method is url parameter transfer (in my opinion, client data access is not strictly valid)

 
 

  
  
Url? Parameter = value
  
  
Var cql = {
  
  
// Get querystring, ignore the case sensitive
  
  
// If no match then return ""
  
  
// This method is provided by colleague fan Zhanfang
  
  
GetQueryStr: function (param ){
  
  
Var re = new RegExp ("[&,?] "+ Param +" = ([^ \ &] *) "," I ");
  
  
Var a = re.exe c (document. location. search );
  
  
If (a = null)
  
  
Return "";
  
  
Return a [1];
  
  
}
  
  
};
 
 

The second method is cookie-based access. If I have written a plug-in, refer to response. Set the following in c:

 
 

  
  
HttpCookie cookie = new HttpCookie ("test ");
  
  
Cookie. HttpOnly = true; // http-specific cookie
  
  
Cookie. Values ["item1"] = "value1 ";
  
  
Cookie. Values ["item2"] = "value2 ";
  
  
HttpContext. Current. Response. Cookies. Set (cookie );
 
 

The third method is globalStorage (replaced by localStorage in html5 ):

 
 

  
  
GlobalStorage ['wrox. com']. name = 'wrox'; // Save the data var name = globalStorage ['wrox. com']. name; // obtain the data
  
  
LocalStorage. setItem ("name", "chemdmeo"); // save data
  
  
LocalStorage. book = 'js'; // save data
  
  
LocalStorage. book // get data
  
  
LocalStorage. getItem ("name") // obtain data
  
  
// Compatible only supports globalStorage's browser function getLocalStorage () {if (typeof localStorage = 'object') {return localStorage;} else if (typeof globalStorage = 'object ') {return globalStorage [location. host];} else {throw new Error ('local storage not available. ');}};
 
 

Note: not all browsers support the preceding dom storage.

It is insecure for the client to store data. This method is not recommended for storing sensitive data.

Recommended by editors]