SessionStorage is a new session storage object for HTML5. It is used to temporarily save the same window (or tab) data. These data will be deleted after closing the window or tab. This article mainly introduces the use of sessionStoraages. Including adding, modifying, deleting operations.
SessionStorage is a new session storage object for HTML5. It is used to temporarily save the same window (or tab) data. These data will be deleted after closing the window or tab.
This object can be called in the JavaScript language through Window.SessionStorage or SessionStorage.
Characteristic1) Restrictions on the same source strategy. If you want to operate the same sessionStorage between different pages, these pages must be under the same protocol, the same host name and the same port. (IE 8 and 9 storage data is based on the same host name, ignoring the requirements of the protocol (HTTP and HTTPS) and port number)
2) Single label page limit. The sessionStorage operation is limited to a single tab page. On this tab page, you can share the SessionStorage data.
3) Only stored locally. The data of SeeSionStorage will not be sent to the server with the HTTP request. It will only take effect on the local area and remove the data after closing the tab page. (If you use Chrome's recovery tab function, the data of SeesionStorage will also be restored).
4) Storage method. SeeSionStorage's storage method is based on Key and Value. The value of the value must be a string type (not the non -string, and it will also be converted to a string during storage. The TRUE value will be converted to TRUE).
5) Storage limit: Different browsers store the upper limit, but most browsers limit the upper limit to less than 5MB.
Browser minimum version supportThe smallest version of the browser support for SessionStorage: IE8, Chrome 5.
Suitable sceneSessionStorage is very suitable for SPA (single -page application), which can be convenient for transmission value in each business module.
propertyReadOnly IntSessionStorage.Length: Returns an integer, indicating the number of data items (key values pairs) stored in the SessionStorage object.
methodString sessionStorage.key (int index): The key name of the INDEX serial number of the current SessionStorage object is returned. If not returned NULL. StringSessionStorage.getItem (String Key): The value of the key name (key). If not returned NULL. VoidSessionStorage.setItem (String key, String Value): This method accepts a key name (key) and value as a parameter to add the key value to the storage; if the key name exists, the corresponding value is updated. VoidSessionStorage.removeItem (String Key): Remove the specified key name from the SessionStorage object. voidSessionStorage.clear (): Clear all items of the SessionStorage object.
Storage data Use the setITEM () method to storeSessionStorage.setItem ('Testkey', 'This is a test value "); //Store through attributes
SessionStorage ['testKey'] = 'This is a value of the test "Read data Value through the getItem () method
SessionStorage.getItem ('Testkey'); // => Return to the corresponding value of testKeyValue by attribute
SessionStorage ['testKey']; // => This is a value of a testStore JSON object
SessionStorage can also store JSON objects: when storing, the object is converted to text format through json.stringify (); when reading, the text is converted back to the object through json.parse ().
var userntity = {name: 'tom', age: 22}; // Storage value: convert the object to the JSON string sessionStorage.Setitem ('user', json.stringify (userntity)); // When the value is taken: Get the JSON string converting object VAR Userjsonstr = SessionStorage.getITEM ('User'); UseRERENTITY = JSON.PARSE (Userjsonstr); console.log (userntity.name); // => T OM
The above is the HTML5 SessionStorage session storage that I introduced to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!