Summary differences between the three data storage methods of JavaScript

Source: Internet
Author: User
Tags sessionstorage
This article mainly introduces the differences between the three JavaScript data storage methods, namely sessionStorage, localStorage, and cookie data storage methods. For more information, see SessionStorage, localStorage, and cookie:
All are saved on the browser side and the same source.

Differences between sessionStorage, localStorage, and cookie:
Cookie data is always carried in the same source http Request (even if not required), that is, the cookie is transmitted back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server and only save the data locally. Cookie data also has the concept of path, which can restrict the cookie to only belong to a specific path.
The storage size limit is also different. The cookie data cannot exceed 4 kb. Because each http request carries a cookie, the cookie is only suitable for storing small data, such as session IDs. Although sessionStorage and localStorage have limits on the storage size, they are much larger than cookies and can reach 5 MB or larger.
SessionStorage: Valid only before the current browser window is closed. It is naturally impossible to maintain persistence. localStorage: always valid. Windows or browsers are always saved and used as persistent data; the cookie is valid only until the specified cookie expires, even if the window or browser is closed.
With different scopes, sessionStorage is not shared in different browser windows, even on the same page. localStorage is shared in all same-source windows, and cookies are shared in all same-source windows.
Web Storage supports the event notification mechanism to send notifications of data updates to listeners.
The Web Storage api is more convenient to use.

The encapsulated localStorage method can control the number and time of stored data

Define (function (require) {var $ = require ('jquery '); var Cache ={}; function support () {var _ t =! (Typeof window. localStorage = 'undefined'); return _ t;} $. extend (Cache, {config: {size: 5, // lifeTime: 86400 // The number of seconds in a day lifeTime: 1*60}, localStorage: window. localStorage, memQueue: (function () {if (support () {var jsonStr = window. localStorage. getItem ('lruconfig'); return jsonStr? JSON. parse (jsonStr): {keys :{}, objs: [] };} else {return {};}) (), get: function (appid, url) {if (true = support () {var key = appid + ':' + url; // start the LRU algorithm. This. LRU (key); // LRU algorithm ends. Var isFresh = true; var nowTime = (new Date ()). getTime ()/1000; if (key in this. memQueue. keys) {var cacheTime = this. memQueue. keys [key]. life/1000; // if the expiration time exceeds the configured life time, // clear the current cache if (nowTime-cacheTime> = this. config. lifeTime) {delete this. memQueue. keys [key]; for (var I = 0, len = this. memQueue. objs. length; I <len; I ++) {var _ o = this. memQueue. objs [I]; if (_ o. key = key) {this. memQueue. objs. sp Lice (I, 1); break;} isFresh = false;} // If isFresh is false, that is, it has expired, null is returned, otherwise, return (false = isFresh) from localStorage )? Null: this. localStorage [key] ;}, set: function (appid, url, value) {if (true = support () {var key = appid + ':' + url; var lruKey = this. getLRU (); // eliminate the least recently used one. // Another method is used to read the key that is most suitable for elimination. // The premise is that the current key is not in localStorage. If (lruKey) {this. localStorage. removeItem (lruKey);} // start to set this value. // for compatibility, set if (typeof this. memQueue. objs! = 'Undefined' & this. memQueue. objs. length <= this. config. size) {this. localStorage. removeItem (key);} else {while (this. memQueue. objs. length> = this. config. size) {var lruKey = this. getLRU (); // eliminate the least recently used one. // Read the if (lruKey) {this. localStorage. removeItem (lruKey); delete this. memQueue. keys [lruKey]; for (var I = 0; I <this. memQueue. objs. length; I ++) {var _ o = this. memQueue. objs [I]; if (_ o. key = lruKey) {this. memQueue. objs. splice (I, 1); break ;}}} this. localStorage [key] = value; // The current key, which must also be lru this. LRU (key); // lru ends this. localStorage. setItem ('lruconfig', JSON. stringify (this. memQ Ueue) ;}},/** minimum recently used algorithm */LRU: function (key) {var memQueue = this. memQueue; if (typeof memQueue. objs! = 'Undefined') {var _ o = memQueue. objs; // start to calculate the key to be eliminated, // It is the largest of the times. If the times has the largest number, // return the smallest var isIn = false; for (var I = 0, len = _ o. length; I <len; I ++) {_ o [I]. times = (key = _ o [I]. key )? 0: _ o [I]. times + 1; _ o [I]. time = (key = _ o [I]. key )? (New Date ()). getTime (): _ o [I]. time; if (key = _ o [I]. key & false = isIn) {isIn = true ;}// if (false = isIn) {var _ to = {'key': key, 'times ': 0, 'time': (new Date ()). getTime (), 'LIFE': (new Date ()). getTime ()}; this. memQueue. keys [key] = _ to; this. memQueue. objs. push (_ to);} _ o. sort (function (f, s) {// sort by times in descending order. If (f. times <s. times) {return 1;} else if (f. times> s. times) {return-1;} else {// start to compare time // sort by time and time in ascending order if (f. time <s. time) {return-1 ;}else {return 1 ;}}}) ;}else {this. memQueue. objs = []; this. memQueue. keys = {}; var _ to = {'key': key, 'times ': 0, 'time': (new Date ()). getTime (), 'LIFE': (new Date ()). getTime ()}; this. memQueue. keys [key] = _ to; this. memQueue. objs. push (_ to); retu Rn null ;},/** read the item to be eliminated */getLRU: function () {var _ o = this. memQueue. objs; if (_ o) {return (_ o. length> = this. config. size )? _ O. shift (). key: null;} return null ;}}); return {'cache': cache };});


Var cache = require ('cache'); // set value cache. cache. set ('IP', 'your own url', value); // get value cache. cache. get ('IP ')

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.