Localstorage (Local Storage) can store data for a long time without time restrictions. data can be used for one day, one year, two years, or even longer. Sessionstorage (Session storage) is only used before the browser is closed. It is allowed to be used when another page is created. After the browser is closed, the data disappears.
Localstorage and sessionstorage In the HTML5 local storage API are used in the same way. The difference is that sessionstorage is cleared after the page is closed, while localstorage is always saved. Taking localstorage as an example, we will briefly introduce the local storage of HTML5 and provide some examples for common problems such as traversal. Localstorage is an API for HTML5 local storage. It uses key-value pairs to access data. The accessed data can only be strings. Different browsers have different support for this API, such as usage and maximum storage space.
I. Basic usage of localstorage API
Localstorage API usage is easy to understand. The following is a common API operation and example: Set Data: localstorage. setitem (Key, value); example:
for(var i=0; i<10; i++){ localStorage.setItem(i,i);}
Get data: localstorage. getitem (key) Get all data: localstorage. valueof () Example:
for(var i=0; i<10; i++){ localStorage.getItem(i);}
Data deletion: localstorage. removeitem (key) Example:
for(var i=0; i<5; i++){ localStorage.removeItem(i);}
Clear all data: localstorage. Clear () Get local storage data quantity: localstorage. Length get the key value of the nth data: localstorage. Key (N)
2. Key-value Traversal method
for(var i=localStorage.length - 1 ; i >=0; i--){ console.log(‘第‘+ (i+1) +‘条数据的键值为：‘ + localStorage.key(i) +‘，数据为：‘ + localStorage.getItem(localStorage.key(i)));}
3. storage size limit test and Exception Handling
3.1 data storage size limit test
Different browsers have limits on the size of HTML5 local storage. The results of a test are as follows:
IE 9 > 4999995 + 5 = 5000000firefox 22.0 > 5242875 + 5 = 5242880chrome 28.0 > 2621435 + 5 = 2621440safari 5.1 > 2621435 + 5 = 2621440opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）
Test code reference:
<!DOCTYPE html>
3.2 data storage Exception Handling
try{ localStorage.setItem(key,value);}catch(oException){ if(oException.name == ‘QuotaExceededError‘){ console.log(‘超出本地存储限额！‘); //如果历史信息不重要了，可清空后再设置 localStorage.clear(); localStorage.setItem(key,value); }}
Summary:
The biggest difference between the two storage technologies of H5 is the lifecycle. Localstorage is a local storage with unlimited storage duration; sessionstorage session storage, data will be lost when the page is closed.
Usage:
Localstorage. setitem ("key", "value") // Storage
Localstorage. getitem (key) // value by key
Localstorage. valueof () // obtain all values
Localstorage. removeitem (key) // delete a single value
Localstorage. Clear () // delete all data
Localstorage. Length // number of data retrieved
Localstorage. Key (n) // obtain the key value of the nth data
Note: localstorage and sessionstorage are used in the same way.
H5 local storage 1
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
