cookie劣勢：
存盤大小限制，4kb
單域名下有數量限制，50個左右
污染請求頭，浪費流量
本地存盤web storage
包括localStorage和sessionStorage
localStorage 本身是一個物件，可以列印查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> console.log(localStorage); </script> </body> </html>
setItem() 設定存盤內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.setItem("cyy",25); console.log(localStorage); </script> </body> </html>
將賦值陳述句注釋，關閉網頁后再次打開，存盤的資料依舊存在
getItem() 獲取存盤內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> //localStorage.setItem("cyy",25); console.log(localStorage.getItem("cyy")); </script> </body> </html>
使用物件方式存盤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> //使用物件方式存盤 localStorage.cyy2=26; console.log(localStorage); </script> </body> </html>
獲取方式同理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> //使用物件方式存盤 localStorage["cyy3"]=24; console.log(localStorage.cyy3); console.log(localStorage["cyy3"]); </script> </body> </html>
使用 removeItem() 洗掉存盤的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> // localStorage.cyy="cyy"; // localStorage.cyy2="cyy2"; localStorage.removeItem("cyy2"); console.log(localStorage.cyy); console.log(localStorage.cyy2); </script> </body> </html>
使用 clear 清除存盤內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.cyy="cyy"; localStorage.cyy2="cyy2"; localStorage.cyy3="cyy3"; localStorage.cyy4="cyy4"; console.log(localStorage); </script> </body> </html>
localStorage.clear() 清除所有存盤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> // localStorage.cyy="cyy"; // localStorage.cyy2="cyy2"; // localStorage.cyy3="cyy3"; // localStorage.cyy4="cyy4"; localStorage.clear(); console.log(localStorage); </script> </body> </html>
使用 length 屬性獲取存盤的個數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.cyy="cyy"; localStorage.cyy2="cyy2"; localStorage.cyy3="cyy3"; localStorage.cyy4="cyy4"; console.log(localStorage.length); </script> </body> </html>
不同的存盤時效
localStorage 存盤會持久化（一般來說沒有時效，不像cookie）
sessionStorage 會在網頁關閉時失效（重繪不會失效）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> sessionStorage.cyy="cyy"; console.log(sessionStorage); </script> </body> </html>
不同的存盤容量
localStorage 一般是2-5M
sessionStorage 存盤容量不一，部分瀏覽器沒有限制
使用storage時的注意點：
1、存盤容量超出限制（會拋出QuotaExceededError例外，應該使用try catch）
2、存盤型別限制（只能存盤字串）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.a=[1,2,3]; console.log(localStorage); </script> </body> </html>
3、sessionStorage失效機制（重繪不會失效，關閉頁面會失效）
實作一個帶有過期機制的localStorage
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> 儲存資料：<input type="text" id="data"><br> 儲存時間（分鐘）：<input type="text" id="time"><br> 資料展示：<span id="show">暫無資料</span><br> <button id="btn">保存</button> <script> var now=new Date().getMinutes(); if(now>=localStorage.time){ localStorage.clear(); }else{ if(localStorage.data){ show.innerHTML=localStorage.data; } } btn.onclick=function(){ localStorage.setItem("data",data.value); show.innerHTML=localStorage.data; localStorage.setItem("time",new Date().getMinutes()+Number(time.value)); } console.log(localStorage); </script> </body> </html>
web storage的優化
性能與存盤容量大小無關，與讀取次數有關
建議：
減少讀取次數
一個item中盡量多儲存資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143975.html
標籤：JavaScript