sessionStorage、localStorage和cookie

相同点

  • 都是保存在浏览器端、且同源的。

区别

  1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
  2. 存储大小限制也不同，cookie数据不能超过4K（小于4096），同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。
  4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
  5. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
  6. web Storage的api接口使用更方便。
  7. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

  1. 什么是Cookie：cookie是存储于用户计算机中的变量。每当该计算机通过浏览器请求某个页面时，就会发送这个cookie。我们可以使用JavaScript来创建和获取cookie的值。

  2. cookie的存储形式：键值对，如：name=张三

  3. 使用JS创建Cookie的格式：document.cookie = “name=张三”;
    还可以为cookie添加一个过期时间（UTC或GMT,默认情况下，cookie在浏览器关闭时删除）。如：

    1
    2
    document.cookie = “name=张三;
    expires=Thu, 18 Dec 2019 12:00:00 GMT”;

  4. 使用JS读取Cookie的格式： var X = document.cookie;

  5. 修改Cookie：JS中修改cookie类似于创建cookie，旧的cookie会被覆盖掉。

  6. 删除Cookie：只需设置expires参数为以前的时间即可。
    如：

    1
    2
    document.cookie = “name=张三; 
    expires=Thu, 18 Dec 2019 12:00:00 GMT”;

  7. Cookie的缺点：

    1. Cookie可能被用户禁用。
    2. 同一个页面被不同浏览器访问时，浏览器之间保存的Cookie不能相互访问。
    3. 每个Cookie都保存在客户端硬盘文件上，可能会被删除。
    4. Cookie安全性不高，所有Cookie都是以纯文本形式记录于文件中。

Web存储机制

  • HTML5提供了一种新的对象Storage，类似于String、Number、Object。通过Storage对象提供的方法和属性来对数据进行增删改查。
  • html5中的Web Storage包括了两种存储方式：localStorage和sessionStorage。两者都是用来存储客户端临时信息的对象。
  • sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。并且他们储存的对象类型均为字符串类型；我们将数据以键值对的形式保存到Storage对象里，通过Storage对象提供的方法进行数据操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1. 增：接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.setItem()

//2. 删
// 清空存储中的所有键名
Storage.clear()
// 接受一个键名作为参数，并把该键名从存储中删除。
Storage.removeItem()

// 3. 改：接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.setItem()

// 4. 查
// 接受一个键名作为参数，返回键名对应的值
Storage.getItem()
// 接受一个数值 n 作为参数，并返回存储中索引为n 的键名
Storage.key()
// 返回存储的数据量
Storage.length

sessionStorage对象

  • sessionStorage对象存储某个特定会话的数据，该数据只保持到浏览器关闭（类似于cookie）。
  • 存储在sessionStorage对象中的数据可以跨越页面刷新而存在。部分浏览器也支持在浏览器崩溃的情况下重启仍然可用（如：Firefox和WebKit等，但是IE不支持）。
  • sessionStorage对象其实是Storage对象的一个实例，具体方法如下：
    1. sessionStorage.length:获取存储在Storage对象中的数据的数量，是一个只读属性。
    2. sessionStorage.key():接受一个数值 n 作为参数，并返回存储中索引为n 的键名。
    3. sessionStorage.getItem():接受一个键名作为参数，返回键名对应的值。
    4. sessionStorage.setItem()：接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    5. sessionStorage.clear()：清空存储中的所有键名。
    6. sessionStorage.removeItem()：接受一个键名作为参数，并把该键名从存储中删除。

globalStorage

globalStorage在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。

  • 基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
// 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写
globalStorage['developer.mozilla.org']

// 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写
globalStorage['mozilla.org']

// 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写
globalStorage['org']

// 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写
globalStorage['']

// 注意：globalStorage对象已经被localStorage对象取代。

localStorage对象

  • localStorage的优势：

    1. localStorage拓展了cookie的4k限制。
    2. localStorage可用将第一次请求的数据直接存储到本地，相当于5M大小的针对于前端页面的数据库，相比于cookie可用节约带宽，但是只有在高版本浏览器中才支持。

  • localStorage的局限：

    1. 只有在IE8以上浏览器才支持localStorage的存储功能。
    2. 目前所有浏览器都会把localStorage的值类型限定为string，这需要我们转换为JSON对象类型。
    3. localStorage在浏览器的隐私模式下不可读取。
    4. 由于localStorage在本质上是对字符串的读取，所以如果存储的内容较多，会消耗掉内存空间，导致页面卡顿，加载速度减慢。
    5. localStorage不能被爬虫抓取到。

localStorage对象的具体方法与sessionStorage的方法一致。