Web storage is used for storing data in a web browser. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively.
Web storage can be viewed simplistically as an improvement on cookies. However, it differs from cookies in some key ways.
Web storage data is not automatically transmitted to the server in every HTTP request, and a web server can't directly write to Web storage. However, either of these effects can be achieved with explicit client-side scripts, allowing for fine-tuning of the desired interaction with the server.
Browsers that support web storage have the global variables sessionStorage and localStorage declared at the window level. The following JavaScript code can be used on these browsers to trigger web storage behaviour:
sessionStorage
Returns an integer representing the number of data items stored in the Storage object.
When passed a number n, this method will return the name of the nth key in the storage.
Storage.getItem()
When passed a key name, will return that key's value.
Storage.setItem()
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.
Storage.removeItem()
When passed a key name, will remove that key from the storage.
Storage.clear()
When invoked, will empty all keys out of the storage.
Web storage can be viewed simplistically as an improvement on cookies. However, it differs from cookies in some key ways.
Storage size
Web storage provides far greater storage capacity (5 MB per origin in Google Chrome, Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer; 25MB per origin on BlackBerry 10 devices) compared to 4 kB (around 1000 times less space) available to cookies.Client-side interface
Unlike cookies, which can be accessed by both the server and client side, web storage falls exclusively under the purview of client-side scripting.Web storage data is not automatically transmitted to the server in every HTTP request, and a web server can't directly write to Web storage. However, either of these effects can be achieved with explicit client-side scripts, allowing for fine-tuning of the desired interaction with the server.
Local and session storage
Web storage offers two different storage areas—local storage and session storage—which differ in scope and lifetime. Data placed in local storage is per origin (the combination of protocol, hostname, and port number as defined in the same-origin policy) (the data is available to all scripts loaded from pages from the same origin that previously stored the data) and persists after the browser is closed. Session storage is per-origin-per-window-or-tab and is limited to the lifetime of the window. Session storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other, a use case that's not well supported by cookies.Interface and data model
Web storage currently provides a better programmatic interface than cookies because it exposes an associative array data model where the keys and values are both strings.Browsers that support web storage have the global variables sessionStorage and localStorage declared at the window level. The following JavaScript code can be used on these browsers to trigger web storage behaviour:
sessionStorage
// Store value on browser for duration of the sessionlocalStorage
sessionStorage.setItem('key', 'value');
// Retrieve value (gets deleted when browser is closed and re-opened) ...
alert(sessionStorage.getItem('key'));
// Store value on the browser beyond the duration of the sessionOnly strings can be stored via the Storage API. Attempting to store a different data type will result in an automatic conversion into a string in most browsers. Conversion into JSON (JavaScript Object Notation), however, allows for effective storage of JavaScript objects.
localStorage.setItem('key', 'value');
// Retrieve value (persists even after closing and re-opening the browser)
alert(localStorage.getItem('key'));
// Store an object instead of a string
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string
// Store an integer instead of a string
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string
// Store an object using JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value
Properties
Storage.lengthReturns an integer representing the number of data items stored in the Storage object.
Methods
Storage.key()When passed a number n, this method will return the name of the nth key in the storage.
Storage.getItem()
When passed a key name, will return that key's value.
Storage.setItem()
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.
Storage.removeItem()
When passed a key name, will remove that key from the storage.
Storage.clear()
When invoked, will empty all keys out of the storage.
No comments:
Post a Comment