JS本地存储技术

localStorage

1. 特点
   ① 永久存储、除非手动删除
   ② 最大可存储5M
   ③ 不参与服务器通信
   ④ 只能存储字符串

2. 存

   localStorage.setItem(key, value);
   

3. 取

   localStorage.getItem(key);
   

4. 删

   localStorage.removeItem(key);
   

5. 清空所有

   localStorage.clear();
   

cookie

1. 特点
   ① 只有关闭整个浏览器，数据才会清除
   ② 可设置过期时间
   ③ 最大可存储4KB，最多可存储50条数据
   ④ 只能存储字符串

2. 存
   防止中文乱码问题，可以利用encodeURIComponent、decodeURIComponent进行编码和解码操作

   document.cookie = `username=${encodeURIComponent('五五')};`;
   

3. 取

   // 取出所有
   console.log(document.cookie);
   // 函数封装：通过key取出指定的cookie
   function getCookieByKey(searchKey) {
      const allCookie = document.cookie.split('; ');
      for(let i = 0; i < allCookie.length; i++) {
          const item = allCookie[i].split('=');
          if (item[0] === searchKey) {
             return decodeURIComponent(item[1]);
          }
      }
   }
   

4. 改
   利用存的方式直接将该条语句覆盖即可

5. 设置过期时间
   expires必须传入日期格式

   // 在n天后过期
   function expiresAfterDay(n) {
   	const d = new Date();
   	d.setDate(d.getDate() + n);
   	return d;
   }
   document.cookie = `username=${encodeURIComponent('五五')};expires=${expiresAfterDay(2)}`; //  2天后过期
   

6. 删
   设置过去的时间即可

   document.cookie = `username=;expires=${new Date(0)}`;
   

7. 限制访问路径
   ① 不设置的话，默认为当前页面加载的路径
   ② path必须与当前页面加载的路径一致，如果不一致，则访问不到

   document.cookie = `username=${encodeURIComponent('五五')};path=/otherPath`; // 模拟路径不同的情况，这时获取该条cookie为空，因为路径不一致
   

8. 限制访问域名
   ① 不设置的话，默认为当前页面加载的域名
   ② domain必须与当前页面加载的域名一致，如果不一致，则cookie设置失败

   document.cookie = `username=${encodeURIComponent('五五')};domain=abc`;
   
   

9. secure
   ① 不设置secure，http/https协议加载的页面都可以设置cookie
   ② 设置secure，只有https协议加载的页面才可以设置cookie

   document.cookie = `username=${encodeURIComponent};secure`;
   

sessionStorage

1. 特点
   ① 关闭当前页面就会清除数据
   ② 存储的数据很小
   ③ 不参与服务器通信
2. 存

   sessionStorage.setItem(key, value);
   

3. 取

   sessionStorage.getItem(key);
   

4. 删

   sessionStorage.removeItem(key);
   

5. 清空所有

   sessionStorage.clear();