Summarize the differences between the three types of JavaScript data storage, javascript Data Storage

Summarize the differences between the three types of JavaScript data storage, javascript Data Storage

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 };});

Usage

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