javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Storage、cookie比较

Storage、cookie的用途和优缺点比较

投稿:yin

cookie的大小是受限制的,并且每次请求cookie都会被发送,浪费宽带,cookie还需要指定作用域,不可以跨域调用。cookie的作用是与服务器进行交互,作为http规范的一部分存在,而webstorage仅仅是为了本地“存储”数据而生。

Storage的概念和cookie的相似,区别是storage是为了更大容量的存储设计的。cookie的大小是受限制的,并且每次请求一个新的页面的时候cookie都会被发送过去,这样无形中浪费宽带,另外cookie还需要指定的作用域,不可以跨域调用。
cookie的作用是与服务器进行交互,作为http规范的一部分存在,而web   storage仅仅是为了本地“存储”数据而生。

Cookie

Cookie的优点:具有极高的扩展性和可用性

1.可以控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术,减少cookie被破解的可能性。

3.可以控制cookie的生命期,给cookie一个时效性 。

cookie的缺点:

1.cookie的长度和数量的限制。最多只能有20条cookie,每个cookie长度不能超过4KB。否则会被截掉至4KB。

2.cookie可能被禁用或删除

3.安全性问题。cookie安全性不够高,cookie都是以纯文本形式记录在文件中,如果要保存用户名密码等信息的时候,最好事先经过加密处理。如果cookie被人拦掉了,就可以获取到所有session信息

在html5中web storage包括两种存储方式:sessionstorage和localstorage

localStorage优点:

localStorage解决了cookie存储空间太小的问题。
相比于cookie的4KB大小存储空间,localStorage的存储空间大小来到了5MB,相当于一个前端的数据库。
格式

Storage存储的格式是键值对(key-value)的格式。
并且浏览器会将所有Storage的值类型限定为string类型,所以需要进行一些转换。

localStorage缺点

低版本的ie浏览器会不支持Storage。
Storage存储数据所占空间太多会影响性能。导致页面变卡。
Storage并不会被搜索引擎的爬虫所抓取到。
localStorage和sessionStorage的区别

localStorage的存储是永久性的,只有在手动删除或者浏览器被卸载后才会被清除。
sessionStorage的存储保存同一窗口或者标签页的数据,当窗口或者页面关闭后会被清除。

cookie、localstorage和sessionstrage的比较

共同点:用于数据的存储。

区别:

1、是否需要添加到http请求头?

HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为响应的一部分,包含会话信息。例如set-cookie: name=value。然后浏览器会存储这样的会话信息,并在这之后,通过为每个请求添加cookie HTTP头将信息发送回服务器。如cookie:name=value。

Web Storage:无须将数据发回服务器,仅在本地保存。

2.存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数

据,sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。如果在发送请求时需要携带大量的报文,建议使用storage更好一点

3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

5.路径:Cookie有路径的限制(比如cookie可以写在某个域名下面或者某个路径下面,我们只让/AAA.com生效,而/bbb.com则就会看不到),Storage只存储的域名下(比如你写在www.baidu.com下面,在这个域名下,不管是什么路径都有这个Storage)

Web Storage存在不少的优势

1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie(<=4kb)要大很多。

2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送到服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。您可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。

localStorage.setItem("name", "张三"),sessionStorage.setItem("age", 18);可进行(key,value)的赋值操作

封装Storage

为什么封装Storage?

Storage本身有API,但是只是简单的key/value形式

Storage只能存储字符串,需要人工转为json对象

Storage只能一次性清空,不能单个清空(api下)

/**
 * Storage封装
 */
const  STORAGE_KEY = 'mall'; //设置一个独一无二的key
export default{
  // 存储值
  setItem(key,value,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    }else{
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  // 获取某一个模块下面的属性user下面的userName
  getItem(key,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      if(val) return val[key];
    }
    return this.getStorage()[key];
  },
  getStorage(){
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
  },
  clear(key, module_name){
    let val = this.getStorage();
    if (module_name){
      if (!val[module_name])return;
      delete val[module_name][key];
    }else{
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

您可能感兴趣的文章:
阅读全文