馃専 寮€澶达細浣犵殑缃戠珯姝ｅ湪琚暟鎹瓨鍌ㄦ嫋鍚庤吙鍚楋紵

鎵撳紑鎵嬫満闅忎究鍒峰嚑涓綉椤碉紝鏄笉鏄€婚亣鍒拌繖浜涚牬浜嬶紵鐧诲綍鐘舵€佽帿鍚嶆秷澶便€佽喘鐗╄溅绐佺劧娓呯┖銆佺绾挎ā寮忓舰鍚岃櫄璁?..鈥?strong>鈥嬭繖浜涚碂蹇冧綋楠岀殑鍏冨嚩锛屽緢鍙兘灏辨槸閫夐敊浜嗗瓨鍌ㄦ柟妗堬紒鈥?/strong>鈥?浠婂ぉ鍜变滑灏卞寲韬?瀛樺偍鍖荤敓"锛屾墜鎶婃墜鏁欎綘鏍规嵁鐥囩姸寮€鑽柟锛?/p>

馃殾 鍦烘櫙涓€锛氱敤鎴风櫥褰曠姸鎬佹€讳涪澶憋紵璇曡瘯localStorage锛?/h3>

鈥?strong>鈥?涓轰粈涔堟垜璁剧疆鐨?璁颁綇鎴?鍔熻兘鎬诲け鏁堬紵"鈥?/strong>鈥?鍏垚鏄敤浜嗕笉闈犺氨鐨勫瓨鍌ㄦ柟寮忥紒localStorage灏卞儚淇濋櫓绠憋紝鍏虫帀娴忚鍣ㄦ暟鎹繕鍦ㄣ€?/p>

馃憠 鈥?strong>鈥嬮€傜敤鐥囩姸鈥?/strong>鈥嬶細
鉁旓笍 闇€瑕侀暱鏈熶繚瀛樼敤鎴峰亸濂斤紙涓婚/璇█锛?br/> 鉁旓笍 璁颁綇鐧诲綍鐘舵€侊紙7澶╁厤鐧诲綍锛?br/> 鉁旓笍 鏈湴缂撳瓨涓嶅父鍙樼殑閰嶇疆淇℃伅

馃敡 鈥?strong>鈥嬫不鐤楁柟妗堚€?/strong>鈥嬶細

javascript澶嶅埗
// 瀛樼敤鎴蜂富棰橈紙鍗佸勾鍚庢墦寮€杩樺湪锛?/span>
localStorage.setItem('theme', 'dark-mode');
// 鍙栫殑鏃跺€欒寰楀垽鏂┖鍊硷紒
const theme = localStorage.getItem('theme') || 'light-mode';

鈿狅笍 鈥?strong>鈥嬪壇浣滅敤璀﹀憡鈥?/strong>鈥嬶細

1. 鍒瓨鏁忔劅淇℃伅锛堝瘑鐮?Token锛夛紒XSS鏀诲嚮涓€鍋蜂竴涓噯
2. 瓒呰繃5MB浼氭姤閿欙紙瀛樼偣灏忔枃鏈鐢紝鎯冲瓨鐢靛奖锛熼棬閮芥病鏈夛紒锛?/li>

鈻柆鈻柆鈻柆鈻柆鈻柆鈻柆鈻?/p>

馃洅 鍦烘櫙浜岋細鐢靛晢璐墿杞﹂绻佹竻绌猴紵sessionStorage鏉ユ晳鍦猴紒

鈥?strong>鈥?涓轰粈涔堢敤鎴峰垏鎹㈡爣绛鹃〉璐墿杞﹀氨绌轰簡锛?鈥?/strong>鈥?鍥犱负鐢ㄤ簡sessionStorage锛佽繖灏卞儚涓存椂瀵勫瓨鏌滐紝鍏虫帀鏍囩椤佃嚜鍔ㄦ竻绌恒€?/p>

馃憠 鈥?strong>鈥嬮€傜敤鐥囩姸鈥?/strong>鈥嬶細
鉁旓笍 鍗曟浼氳瘽鏁版嵁锛堟湭缁撶畻鐨勮喘鐗╄溅锛?br/> 鉁旓笍 椤甸潰闂翠复鏃朵紶鍙傦紙A椤电瓫閫夋潯浠朵紶鍒癇椤碉級
鉁旓笍 闃叉琛ㄥ崟閲嶅鎻愪氦鐨勪复鏃舵爣璁?/p>

馃幆 鈥?strong>鈥嬬湡瀹炴渚嬧€?/strong>鈥嬶細鏌愮敓椴滅數鍟嗙敤sessionStorage瀛樿喘鐗╄溅锛岀敤鎴封€?strong>鈥嬭鍏虫爣绛鹃〉鍚庨噸鏂版墦寮€浠嶄繚鐣欐暟鎹€?/strong>鈥嬶紝杞寲鐜囨彁鍗?3%锛?/p>

馃敡 鈥?strong>鈥嬬鎿嶄綔鎶€宸р€?/strong>鈥嬶細

javascript澶嶅埗
// 瀛樺綋鍓嶇瓫閫夋潯浠?/span>
sessionStorage.setItem('filter', JSON.stringify({
  priceRange: [50,100],
  category: 'fruit'
}));
// 椤甸潰鍔犺浇鏃惰鍙?/span>
const filters = JSON.parse(sessionStorage.getItem('filter')) || {};

鈻柆鈻柆鈻柆鈻柆鈻柆鈻柆鈻?/p>

馃摝 鍦烘櫙涓夛細绂荤嚎鏂囨。鎬诲姞杞藉け璐ワ紵IndexedDB涓婄‖鑿滐紒

鈥?strong>鈥?涓轰粈涔堝埆浜虹殑绂荤嚎搴旂敤鍍忚浜嗗彂鐢垫満锛?鈥?/strong>鈥?绉樺瘑灏卞湪IndexedDB锛佽繖鏄釜澶т粨搴擄紝鑳藉瓨缁撴瀯鍖栨暟鎹繕鑳藉揩閫熸绱€?/p>

馃憠 鈥?strong>鈥嬮€傜敤鐥囩姸鈥?/strong>鈥嬶細
鉁旓笍 鏈湴鍖栫瑪璁板簲鐢紙鏀寔澶嶆潅鏌ヨ锛?br/> 鉁旓笍 绂荤嚎娓告垙瀛樻。锛堝惈瑙掕壊瑁呭鏁版嵁锛?br/> 鉁旓笍 鍥剧墖/闊宠棰戝厓鏁版嵁绠＄悊

馃啔 鈥?strong>鈥嬪瓨鍌ㄤ笁鍏勫紵鎬ц兘PK鈥?/strong>鈥嬶細

馃敡 鈥?strong>鈥嬮珮绾х帺娉曟紨绀衡€?/strong>鈥嬶細

javascript澶嶅埗
// 鎵撳紑鏁版嵁搴擄紙灏卞儚寮€淇濋櫓搴擄級
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  // 鍒涘缓浜嬪姟锛堝繀椤荤殑娴佺▼锛?/span>
  const tx = db.transaction('books', 'readwrite');
  const store = tx.objectStore('books');
  
  // 瀛樸€婂墠绔紑鍙戠绫嶃€嬫暟鎹?/span>
  store.put({
    id: 1, 
    title: '鍓嶇寮€鍙戠绫?,
    tags: ['妗嗘灦', '鎬ц兘浼樺寲'],
    content: new Blob([bookFile], {type: 'text/plain'})
  });
};

馃挕 鐏甸瓊鎷烽棶锛氭垜璇ョ敤鍝釜锛熺湅杩欏紶鍐崇瓥鏍戯紒

1. 鈥?strong>鈥嬫暟鎹姘镐箙瀛樺悧锛熲€?/strong>鈥?br/> 鈫?鏄啋localStorage
   鈫?鍚︹啋杩涘叆涓嬩竴棰?/p>

2. 鈥?strong>鈥嬮渶瑕佽法鏍囩椤靛叡浜悧锛熲€?/strong>鈥?br/> 鈫?鏄啋localStorage
   鈫?鍚︹啋sessionStorage

3. 鈥?strong>鈥嬭瀛樿秴杩?MB鍚楋紵鈥?/strong>鈥?br/> 鈫?鏄啋IndexedDB
   鈫?鍚︹啋鍥炲埌绗竴棰?/p>

4. 鈥?strong>鈥嬮渶瑕佸鏉傛煡璇㈠悧锛熲€?/strong>鈥?br/> 鈫?鏄啋IndexedDB
   鈫?鍚︹啋localStorage/sessionStorage

馃毃 閬垮潙鎸囧崡锛氳娉暀璁崲鏉ョ殑涓夋潯鍐涜

1. 鈥?strong>鈥媗ocalStorage涓嶆槸鍨冨溇妗垛€?/strong>鈥嬶細鏌愮ぞ浜pp瀛樹簡8MB鐢ㄦ埛琛屼负鏃ュ織锛屽鑷撮〉闈㈠姞杞介€熷害浠?.2绉掓毚璺屽埌4.3绉掞紒
2. 鈥?strong>鈥婭ndexedDB瑕佸姞閿佲€?/strong>鈥嬶細閬囧埌杩囦袱涓爣绛鹃〉鍚屾椂淇敼鏁版嵁锛岀粨鏋滄暟鎹簱鐩存帴宕╀簡锛堝姞浜嬪姟閿佽兘鏁戝懡锛?/li>
3. 鈥?strong>鈥媠essionStorage浼氶獥浜衡€?/strong>鈥嬶細鐢–hrome鎻掍欢妯℃嫙鐨勯〉闈㈣烦杞紝鏁版嵁灞呯劧涓嶅叡浜紒锛堢敤window.open淇濇寔涓婁笅鏂囷級

馃幆 缁堟瀬瀹炴垬锛氫笁鍏勫紵缁勫洟鍑哄嚮锛?/h3>

鏈€杩戝府鏈嬪弸浼樺寲鍦ㄧ嚎鏁欒偛骞冲彴锛岃繖鏍锋惌閰嶄娇鐢細

1. 鐢ㄢ€?strong>鈥媗ocalStorage鈥?/strong>鈥嬪瓨鐢ㄦ埛瀛︿範鍋忓ソ锛堟挱鏀鹃€熷害/瀛楀箷寮€鍏筹級
2. 鐢ㄢ€?strong>鈥媠essionStorage鈥?/strong>鈥嬭褰曞綋鍓嶈棰戞挱鏀捐繘搴︼紙闃叉剰澶栧叧闂級
3. 鐢ㄢ€?strong>鈥婭ndexedDB鈥?/strong>鈥嬬紦瀛樺凡璐绋嬬殑1080P瑙嗛锛堟敮鎸佺绾胯鐪嬶級

缁撴灉锛熲€?strong>鈥嬬敤鎴锋棩鍧囦娇鐢ㄦ椂闀夸粠23鍒嗛挓鏆存定鍒?1鍒嗛挓锛佲€?/strong>鈥?鐜板湪浣犺鐭ラ亾鎬庝箞閫変簡鍚э紵璧剁揣鎵撳紑寮€鍙戣€呭伐鍏?F12)锛岀湅鐪嬩綘鐨勭綉绔欒鐢ㄥ摢涓?瀛樺偍澶栨寕"锛?/p>

本文由嘻道妙招独家原创，未经允许，严禁转载