js缓存cookie、localStorage、sessionStorage

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
cookie、localStorage、sessionStorage的区别cookie:设置cookie后,cookie每次请求都会在头上带上cookie信息。cookie在设置的时候如果不设置过期时间,就表示是个会话cookie,以前我以为关闭浏览器会话cookie就消失了,然而在多数情况下windows系统或者安卓系统确实是这样的。但是在macOS系统或者ios系统中,关闭浏览器并不会清除掉会话cookie,结束浏览器进程才行。localStorage:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。满了的情况下仍继续存储并不会覆盖其他的值,而是直接报错(QuotaExceededError),并且当前存储的值也会被清空。浏览器支持每个域名下存储5M数据。sessionStorage:sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。假设你在A页面存储了sessionStorage,新开选项卡将A页面的链接粘贴进去打开页面,sessionStorage也是不存在的。所以sessionStorage存在的条件是页面间的跳转,A页面存储了sessionStorage,他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。cookie的使用
  1. /*设置cookie*/
  2. function setCookie(name, value, iDay)
  3. {
  4. var oDate=new Date();
  5. oDate.setDate(oDate.getDate()+iDay);
  6. document.cookie=name+'='+value+';expires='+oDate;
  7. };
  8. /*使用方法:setCookie('user', 'simon', 11);*/
  9. /*获取cookie*/
  10. function getCookie(name){
  11. var arr=document.cookie.split('; ');//多个cookie值是以; 分隔的,用split把cookie分割开并赋值给数组
  12. for(var i=0;i<arr.length;i++){//历遍数组
  13. var ars=arr[i].split('=');//原来割好的数组是:user=simon,再用split('=')分割成:user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
  14. if(ars[0]==name){//如果数组的属性名等于传进来的name
  15. return ars[1];//就返回属性名对应的值
  16. }
  17. }
  18. return ''; //没找到就返回空
  19. }
  20. /*使用方法:getCookie('user')*/
  21. /*删除cookie*/
  22. function removeCookie(name){
  23. setCookie(name, 1, -1); //-1就是告诉系统已经过期,系统就会立刻去删除cookie
  24. };
  25. /*使用方法:removeCookie('user')*/
  26. 1.正数:将Cookie写入浏览器所在电脑的硬盘,持久化存储,到时间自动删除。
  27. 2.负数:默认值,Cookie在当前浏览器内存中,当浏览器关闭,则Cookie被销毁。
  28. 3.零:删除对应Cookie。
localStorage的使用
  1. //创建
  2. localStorage.setItem('name','张三')//第1种
  3. localStorage.name = '张三';//第2种
  4. // 获取
  5. localStorage.getItem('name')// 张三
  6. localStorage.name; // 张三
  7. // 删除
  8. localStorage.removeItem('name')
  9. delete localStorage.name;
  10. // 清除全部
  11. localStorage.clear();
  12. // 遍历
  13. for (let i = 0; i < localStorage.length; i++) {
  14. const key = localStorage.key(i); // 获取本地存储的Key
  15. localStorage[key]; // 获取本地存储的value
  16. }
sessionStorage的使用
  1. //创建
  2. sessionStorage.setItem('name','张三')//第1种
  3. sessionStorage.name = '张三';//第2种
  4. // 获取
  5. sessionStorage.getItem('name')// 张三
  6. sessionStorage.name; // 张三
  7. // 删除
  8. sessionStorage.removeItem('name')
  9. delete sessionStorage.name;
  10. // 清除全部
  11. sessionStorage.clear();
【本文转自:韩国cn2服务器 http://www.558idc.com/kt.html欢迎留下您的宝贵建议】