Home > Developer > Web Develop
WebStorage is used to implement the client storage data, we all know that the previous cookie is a way of client storage, today look at HTML5 new local storage methods: Localstorage and Sessionstorage.
localstorage: The stored data will always exist on the local client, even if the browser is closed;
Sessionstorage: just for with data storage for a session , Open a new browser window or Once the window is closed the data is gone.
Now that you know the two new local storage methods, how do you use that??
in HTML5  use JavaScript to data storage and access First look at Localstorage How to implement Now data storage and access
<script>if (window.localstorage) { localstorage.lastname= "Smith"; document.write (Localstorage.lastname); }else{ alert (' Sorry! Your browser does not support localstorage! '); }</script>1. First detect if the browser supports local storage.
2. Localstorage storage data can be added directly by adding a property to Localstorage
For example: localstorage.x or localstorage["X"];
Access to data is via localstorage.x or localstorage["x";
In addition to the above method, the data can be stored and accessed through the GetItem () and SetItem () methods Localstorage.
The SetItem () method is stored in the form of a Key-value key-value pair.
GetItem (key) way to access the data;
RemoveItem (key) is used when purging data. If you want to clear all key-value pairs at once, use clear ().
In addition to the above methods, Localstorage also has the length property, which can be a key () method
For example: L Ocalstorag E.length Returns the number of stored data (how many key-value pairs are stored)
localstorage. key ( index ) returns the key labeled Index
For example: Localstorage or sessionstorage traversal via the key () method and the Length property
var storage = Localstorage; Functionshowstorage () {for (vari=0;i<storage.length;i++) { //key (i) obtains the corresponding key, and then uses the GetItem () method to obtain the corresponding value document.write (Storage.key (i) + ":" + storage.getitem (Storage.key (i) + "<br>");}}<body> <p> This page has been accessed: <span id= "Count" > </span> times </p> <script> if (!localstorage.pageloadcount) localstorage.pageloadcount = 0; Localstorage.pageloadcount = parseint (localstorage.pageloadcount) + 1; document.getElementById (' count '). textcontent = Localstorage.pageloadcount; </script></body>To store JSON-formatted data, you need to convert the JSON object to a JSON data string
Json.stringify (obj) converts an object into a JSON-formatted data string, returning the converted string
Json.parse (str) parses the data into an object, returning the parsed object
remark: localstorage stored data is not shared across browsers , a browser can only read the data of their respective browsers, storage space 5M.
HTML5 's local storage sessionstorage and localstorage also provides a storage event. This event can be used to listen for changes to key-value pairs. storage event only in "stored data" is triggered when a change occurs
For example, when SetItem (), RemoveItem (), or the clear () method is called, and the data really changes, the storage event is triggered. Note that the condition here is " the data really changed ." That is, if the current storage area is empty, then the call to clear () does not trigger the event. Or, by SetItem () to set a value that is the same as the existing value, the event is not triggered. The storage area is triggered when changes occur.
if (Window.addeventlistener) {Window.addeventlistener ("storage", Handle_storage,false);} else if (window.attachevent) {window.attachevent ("Onstorage", Handle_storage);} function Handle_storage (e) {if (!e) {e=window.event;}//showstorage ();}the variables in the above code e is a storageevent object, this object has many useful properties, can be very good to observe the change of key value pairs.
· Storagearea: Represents the storage type (localstorage or sessionstorage)
· Key: The key where the change occurred
· The original value of the Oldvalue:key
· New value for Newvalue:key
· url*: Key changes the URL that occurred
Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, and RemoveItem, and so on, and localstorage exactly the same. Here is no longer one by one to repeat!
HTML5 Local storage-localstorage and Sessionstorage
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
