js本地存儲-localStorage和cookie詳解以及區別

本地存儲-localStorage和cookie

localStorage詳解(重點是4.localStorage的使用)

1. 介紹

   • 瀏覽器提供的，可以將一些信息存儲在緩存中的技術
   • 緩存，瀏覽器在硬盤中划分的獨立區域，用來存儲瀏覽器產生的資源
   • 硬盤 -> 某個軟件(瀏覽器) -> 緩存 -> 本地存儲 -> localStorage

2. 分類

   • cookie 老技術
     • 指定有效期
     • 不能跨域（瀏覽器，網站，路徑）
   • storage HTML5規范中新增的本地存儲
     • localStorage 只能永久
     • sessionStorage 只能會話級（關閉瀏覽器自動清除）

3. localStorage的特點

   • 自身是個對象，直接屬於window
   • 只能存字符
   • 大小限制
   • 不能跨域（瀏覽器，網站）
   • 不安全性
     • 整個前端都不安全，前端沒有安全性

4. localStorage的使用

   • 對象的操作

     localStorage.a = "hello";
     localStorage.a = "world";
     console.log(localStorage.a);
     delete localStorage.a;
     

   • 自身的API(方法) √√√
     • 設置
       • localStorage.setItem("key","val");
     • 獲取
       • console.log(localStorage.getItem("key"));
     • 刪除
       • localStorage.removeItem("key");
       • localStorage.clear(); // 慎用
     • 查看總數
       • localStorage.length

5. 本地存儲的應用

   • localStorage
     • 記住賬號密碼
       • 友情提示：不要在公共區域勾選此項

6. 瀏覽器提供的查看本地存儲的方式

   • 控制台的application選項 -> storage -> local storage
     • 刷新，刪除一條，刪除多條

cookie詳解

1. cookie的介紹

• 也是一種本地存儲。
• cookie：會話跟蹤技術
  • 可以記錄瀏覽器每次連接產生的狀態
  • cookie記錄到瀏覽器的緩存，所以，cookie也是本地存儲的一種技術
  • 所以，cookie會跟隨http協議發往后台
    • 意味着：cookie最好處於服務器環境中使用

2. cookie的特點

• 只能存文本

• 大小限制，大約4K

• 數量限制，大約50條

• 時間限制，默認：會話級(瀏覽器關閉)；可以指定過期時間

• 不允許跨域，瀏覽器，網站，路徑

• 注意：任何本地存儲，都沒有安全性，所以，不要在本地存儲中直接存儲賬號密碼，至少要加密

3. cookie的使用

• cookie是document的一個屬性，這個屬性值是個字符
  • 通過給這個屬性設置不同格式的字符，實現cookie的不同操作
  • document.cookie
    • 實現增刪改查
    • 有效期，路徑

    //只設置變量和值
    document.cookie = "qq=123";
    //設置變量、值以及路徑
    document.cookie = "admin=123;path=/";
    // 設置有效期
    var d = new Date();
    d.setDate(d.getDate() + 4);
    document.cookie = "ww=123;expires=" + d;
    console.log(document.cookie);
    

• 因為cookie用來記錄http的狀態，所以會跟隨http發往服務器，最好將cookie放在服務器環境中使用
  • 某些瀏覽器支持在本地環境使用cookie