绠€浠嬨€€銆€杩欎釜璇濋鍏跺疄鍦ㄤ笂娆＄殑鍒嗕韩<灏忕▼搴忓～鍧戠瑪璁?涓氨鎻愬埌浜嗭紙澶у鍙互缁曡繃~锛夛紝涓嶈繃鍚庢潵缇ら噷/璇勮閲屾湁鍚屽锛屾彁鍑轰竴浜涢棶棰樼殑鏃跺€欙紝鎴戦棶鑳戒笉鑳藉崟鐙粍缁囦竴涓洿璇︾粏鐨勫垎浜紝璁茶В缁嗚妭锛屾敼杩涙彁鍒扮殑涓嶈冻锛屽鏋滃彲浠ワ紝鎴戞湁浠ヤ笅馃憞銆傗€斺€斻€婄敤蹇冨垎浜仛娓╂殩鐨勬敾鍩庣嫯锛屾垜鏄甯～鍧戝畼-鑻忔銆嬪ぇ瀹舵棭涓婂ソ锛岃繖閲屾槸@IT路骞冲ご鍝ヨ仈鐩燂紝鎴戞槸棣栧腑濉潙瀹樷垯鑻忔锛岀敤蹇冨垎浜仛涓€鍙俯鏆栫殑鏀诲煄鐙€傚叕浼楀彿:honeyBadger8,group:912594095鎬濊€冪偣銆€銆€浠庢帴瑙﹀墠绔紑濮嬶紝鍏堜粠鏈€鐔熸倝鐨勫瓨鍌ㄧ浉鍏砪ookies寮€濮嬪垎鏋愶紝鎴栬€呭垎鏋愪笌娣樺疂銆佺墿娴併€侀椆閽熷瘑鍒囩浉鍏崇殑涓滆タ鍦ㄦ垜浠殑鐢熸椿涓紝cookie浼氱粰浣犱竴涓綘璁剧疆鐨勬椂闂淬€傚鏋滀笉璁剧疆榛樿session锛屼細杩囨湡锛涙窐瀹濊喘鐗╁皢浠庢偍涓嬪崟浠樻鏃惰捣涓鸿鍟嗗搧璁惧畾鍙戣揣鏈熼檺銆傝繃浜嗚繖涓椂闂达紝灏嗚嚜鍔ㄨ涓烘偍鏀跺埌璐у搧锛堝嵆璁㈠崟缁撴潫锛夛紱鎮ㄥ湪闂归挓涓婅缃殑鎻愰啋鏃堕棿瀹為檯涓婃槸瀹冪殑鍒版湡鏃堕棿锛涘啀姣斿姣忓ぉ鍜屼綘鎭伅鐩稿叧鐨勪骇鍝侀渶姹傘€傞渶姹傜粨鏉熷悗锛屼綘缁欏嚭鐨勫湪绾挎椂闂村氨鏄繖涓渶姹傘€傛洿绠€鍗曠殑璇达紝鍦ㄤ綘浠婂勾鐢熸棩鍒版槑骞寸敓鏃ヤ箣闂达紝鐩稿綋浜庤缃簡涓€涓繃鏈熸椂闂达紱浠庝笂闈㈡垜浠彲浠ュ緱鍑虹粨璁猴紝浠讳綍浜嬩欢鎴栧姩浣滈兘鏈夋椂闂撮檺鍒讹紝鏈夎妭鐐癸紝鐢氳嚦鎴戜滑鍙互hacklocalStorage锛岃繖鏄竴涓畬缇庣殑API锛屼负浠€涔堟垜浠笉鑳芥彁渚涜繃鏈熸満鍒讹紝鍥犱负sessionStorage鍜孋ookie涓嶈兘婊¤冻鎴戜滑鐨勫疄闄呴渶姹傘€傚疄鐜版€濊矾銆€銆€涓嶅ソ鎰忔€濓紝榛戠殑localStorage骞朵笉瀹岀編锛屾湁鐐瑰じ寮狅紝鏍规嵁涓婇潰鐨勬€荤粨锛岄棶棰樺緢绠€鍗曪紝缁檒ocalStorage涓€涓繃鏈熸椂闂达紝涓€鍒囧氨杩欎箞绠€鍗曪紵鏈€鍚庢垜浠潵鐪嬩竴涓嬪叿浣撳疄鐜帮細绠€鍗曞洖椤句竴涓?/渚?锛歭ocalStorage.setItem('test',1234567);lettest=localStorage.getItem('test');console.log(typeoftest锛屾祴璇曪級;//绀轰緥2锛歭ocalStorage['name']='鑻忓崡';console.log(localStorage['name']);/*Output:"1234567",'鑻忓崡'锛岃繖閲屾敞鎰忥紝1234567淇濆瓨杩涘幓鐨勬椂鍊欐槸涓€涓暟瀛楋紝鍙栧嚭鏉ョ殑鏃跺€欏氨鍙樻垚浜嗕竴涓猻tring*/rewriteset(store)鏂规硶锛氶鍏堬紝鏈塳ey銆乿alue銆乪xpired涓変釜鍙傛暟锛屽垎鍒搴攌ey銆乿alue銆佽繃鏈熸椂闂淬€傚埌鏈熸椂闂寸殑鍗曚綅鍙互鑷敱浣跨敤锛屽皬鏃躲€佸垎閽熴€佸ぉ閮藉彲浠ャ€傛敞鎰忥細瀛樺偍鐨勫€煎彲鑳芥槸鏁扮粍/瀵硅薄锛屼笉鑳界洿鎺ュ瓨鍌ㄣ€傚畠闇€瑕佽浆鎹负JSON.stringify銆傝繖涓椂闂存€庝箞璁剧疆锛熷瓨鍌ㄨ繖涓€肩殑鏃跺€欙紝鍦ㄩ敭锛坘ey锛夌殑鍩虹涓婃墿灞曚竴涓瓧娈碉紝姣斿锛歬ey+'_expires_'锛屽畠鐨勫€间负褰撳墠鏃堕棿鎴?expired杩囨湡鏃堕棿銆傚叿浣撶湅涓€涓嬩唬鐮侊細set(key,value,expired){/**璁剧疆瀛樺偍鏂瑰紡*@param{String}keykey*@param{String}valuevalue,*@param{String}expired杩囨湡鏃堕棿锛屽垎鍒嗛挓锛屼笉闇€瑕?@by@IT路骞冲ご鍝ヨ仈鐩?棣栧腑濉潙瀹樷垯鑻忓崡鍒嗕韩锛屼氦娴侊細912594095*/letsource=this.source;婧怺閿甝=JSON.stringify(鍊?;if(expired){source[`${key}__expires__`]=Date.now()+1000*60*expired};杩斿洖鍊硷紱}閲嶅啓get(鑾峰彇)鏂规硶锛氳幏鍙栨暟鎹椂锛屽厛鍒ゆ柇涔嬪墠瀛樺偍鐨勬椂闂寸殑鏈夋晥鏈燂紝骞朵笌褰撳墠鏃堕棿杩涜姣旇緝锛涗絾鏄痚xpired鍦ㄥ瓨鍌ㄧ殑鏃跺€欏苟涓嶆槸蹇呴』鐨勫弬鏁帮紝鎵€浠ラ粯璁ゆ槸褰撳墠鏃堕棿+1锛屼篃灏辨槸闀挎湡鏈夋晥锛涘鏋滃瓨鍌ㄦ椂璁剧疆浜嗚繃鏈熸椂闂达紝鑾峰彇鏃跺彂鐜板皬浜庡綋鍓嶆椂闂存埑锛屽垯鎵ц鍒犻櫎鎿嶄綔锛岃繑鍥炵┖鍊硷紱娉ㄦ剰锛氬瓨鍌ㄧ殑鍊煎彲鑳芥槸鏁扮粍/瀵硅薄锛屽彇鍥炲悗涓嶈兘鐩存帴杩斿洖銆侸SON.parse闇€瑕佽浆鎹€傝缁嗙湅浠ｇ爜锛歡et(key){/**鑾峰彇鏂规硶*@param{String}keykey*@param{String}expired瀛樺偍鏃舵槸闈炲繀濉瓧娈碉紝鎵€浠ュ彲鑳藉彇涓嶅埌锛岄粯璁や负Date.now+1*@鍒嗕韩鑷狜IT路骞冲ご鍝ヨ仈鐩?棣栧腑濉厖瀹樷垯鑻忔锛岄€氳锛?12594095*/constsource=this.source,expired=source[`${key}__expires__`]||Date.now+1;constnow=Date.now();if(now>=expired){this.remove(key);杩斿洖;}甯搁噺鍊?婧怺閿甝锛烰SON.parse(婧怺閿甝):婧怺閿甝;returnvalue;}閲嶅啓remove(鍒犻櫎)鏂规硶锛氬垹闄ゆ搷浣滅畝鍗曪紱remove(key){constdata=this.source,value=data[key];//鍒犻櫎棣栧腑濉潙瀹樷垯鑻忓崡涓€鏍忕殑鏁版嵁[key];鍒犻櫎鏁版嵁[`${key}__expires__`];returnvalue;}浼樺寲鐐癸細璁板緱涓婃鏈変釜鍚屽杩欐牱璇勮锛氣€渄eletecache鍙互鍦╟onstructor閲屾墽琛屽悧锛屾斁鍦╣et閲岋紝涓€鐩翠笉鍘诲彇涓嶅ソ鍚楋紵鈥濓紱鎵€浠ヨ繖娆′紭鍖栧仛涓€涓垵濮嬪寲delete鎿嶄綔锛屾竻闄よ繃鏈熸暟鎹紱涓轰粈涔堜笉浣跨敤forin鑰屾槸for锛熷綋forin寰幆閬嶅巻瀵硅薄鐨勫睘鎬ф椂锛屽師鍨嬮摼鐨勬墍鏈夊睘鎬ч兘浼氳璁块棶锛岃В鍐虫柟娉曪細浣跨敤hasOwnProperty鏂规硶杩囨护鎴栬€匫bject.keys浼氳繑鍥炰竴涓嚜韬彲鏋氫妇灞炴€х殑鏁扮粍锛涚被瀛樺偍{鏋勯€犲嚱鏁帮紙props锛墈this.props=props||{}this.source=this.props.source||window.localStoragethis.initRun();}initRun(){/**璁剧疆瀛樺偍鏂瑰紡*@param{String}keykey*@param{String}valuevalue锛屽瓨鍌ㄧ殑鍊煎彲鑳芥槸鏁扮粍/瀵硅薄锛屼笉鑳界洿鎺ュ瓨鍌紝闇€瑕佽浆涓篔SON.stringify*@param{String}expired杩囨湡鏃堕棿锛屽崟浣嶅垎閽?@鍒嗕韩鑷狜IT路骞冲ご鍝ヨ仈鐩?棣栧腑濉潙瀹樷垯鑻忔锛岄€氳锛?12594095*/constreg=newRegExp("__expires__");璁╂暟鎹?this.source;letlist=Object.keys(鏁版嵁);if(list.length>0){list.map((key,v)=>{if(!reg.test(key)){letnow=Date.now();letexpires=data[`${key}__expires__`]||Date.now+1;if(now>=expires){this.remove(key);};};returnkey;});};}}鎬荤粨锛氥€€銆€浠ヤ笂灏辨槸浠婂ぉ涓哄ぇ瀹跺垎浜殑鎬荤粨锛屽ぇ瀹禛ET浜嗗悧锛熷皬绋嬪簭銆乻essionStorage銆乴ocalStorage閮介€傜敤锛岀◢浣滆皟鏁村嵆鍙€傚笇鏈涗粖澶╃殑鍒嗕韩鑳界粰澶у甯︽潵涓€浜涙垚闀裤€傝寰椾笉閿欑殑璇濊寰楀叧娉ㄤ笅鍏紬鍙凤紝鎴戜滑姣忓懆绗竴鏃堕棿涓烘偍鎺ㄩ€佹渶鏂版洿鏂板垎浜煈囸煈囨洿澶氭枃绔狅細easy-mock鏄渶濂界殑澶囪儙锛屼笉鍙樻€т笉鏄竴涓渶浣冲鑳庝箣閫夛紝鍥犱负浣跨敤浜哛eact瀹樻柟鍑哄満锛屾€荤粨鍒嗕韩锛侀潰璇曡俯杩囩殑鍧戦兘鍦ㄨ繖閲寏浣犲簲璇ュ仛鐨勫墠绔€ц兘浼樺寲鎬荤粨锛佸浣曡缃甽ocalStorage鐨勮繃鏈熸椂闂达紵涓€鐐瑰姩鍥锯€斺€斿浣曠敤CSS3鐢诲嚭浣犵湅寰楁噦鐨?D榄旀柟锛熶綔鑰咃細鑻忓崡-棣栧腑濉姤瀹橀摼鎺ワ細https://blog.csdn.net/weixin_...閫氳锛?12594095锛屽叕浼楀彿锛歨oneyBadger8鏈枃涓哄師鍒涳紝鐗堟潈褰掍綔鑰呮墍鏈夈€傚晢涓氳浆杞借鑱旂郴@IT路骞冲ご鍝ヨ仈鐩熻幏寰楁巿鏉冦€傞潪鍟嗕笟杞浇璇锋敞鏄庡師鏂囬摼鎺ュ拰鍑哄銆?/p>
