浏览器的存储

cookie

1. cookie是什么

cookie 是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。cookie 数据会自动在web浏览器和web服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有 cookie 值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的 cookie 的操作。

2. Cookie的特点

• 不同的浏览器存放的 cookie 位置不一样，也是不能通用的。
• cookie 的存储是以域名形式进行区分的，不同的域下存储的 cookie 是独立的。
• 我们可以设置 cookie 生效的域（当前设置 cookie 所在域的子域），也就是说，我们能够操作的 cookie 是当前域以及当前域下的所有子域。

3. Cookie的缺点

• 存储量小。大小和数量有限制，每个 domain 最多只能有 20 条 cookie ，每个 cookie 不能超过4KB，否则会被截断。
• 影响性能。由于 cookie 会由浏览器作为请求头发送，因此当Cookie存储信息过多时，会影响特定域的资源获取的效率，增加文档传输的负载（同一个域名下的所有请求都会携带 cookie）。 且每次访问都要传送 cookie 给服务器，浪费带宽。
• 安全问题。cookie 一旦被劫持，就可以获取用户的 session 信息。
• 只能储存字符串，且以文本的方式存储。
• cookie 需要指定作用域，不可以跨域调用。
• cookie 数据有路径（path）的概念，可以限制 cookie 只属于某个路径下。
• 用户可以操作（禁用） cookie ，功能受限；

4. 应用场景

• 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除 cookie ，则每次登录必须从新填写登录的相关信息。
• 保存上次登录的时间等信息。
• 保存上次查看的页面
• 浏览计数
• 广告追踪
• 购物车的状态保持

5. Cookie的操作

基本的 Cookie 操作主要有三个：读取，写入和删除。但在JavaScript中去处理 cookie 是一件很繁琐的事情，因为 cookie 中的所有的名字和值都是经过URI编码的，所以当我们必须使用 decodeURICompoent 来进行解码才能得到 cookie 的值。

• expires：过期时间

默认为这个 cookie 生命周期为浏览器会话期间，只要关闭浏览器窗口， cookie 就消失了。

如果设置一个时间，当过了到期日期时，浏览器会自动删除该 cookie 。
如果想删除一个 cookie ，只需要把它过期时间设置成过去的时间即可，比如希望设置过期时间一年：new Date().getTime() + 365 * 24 * 60 * 60 * 1000

• path：路径

值可以是一个目录，或者是一个路径。

如果 cc.com/test/index.html 建立了一个cookie，那么在 cc.com/test/ 目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在 cc.com/test/test2/test3 里的任何页面都可以访问 cc.com/test/index.html 建立的 cookie 。
若 cc.com/test/ 若想访问 cc.com/test/index.html 设置的 cookes ，需要把 cookies 的 path 属性设置成 “/”。
在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享 cookies 。

• domain：主机名

是指同一个域下的不同主机，例如：www.baidu.com 和 map.baidu.com 就是两个不同的主机名。默认情况下，一个主机中创建的 cookie 在另一个主机下是不能被访问的，但可以通过 domain 参数来实现对其的控制：document.cookie = "name=value;domain=.baidu.com"
这样，所有 *.baidu.com 的主机都可以访问该 cookie 。

看下具体实现方法：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

我们来看看CookieUtil对象是如何操纵cookie的：

var CookieUtil = {
    // get可根据cookie的名字获取相应的值
    get: function() {
        const cookieName = encodeURIcOMPONET(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null
        if(cookieStart > -1) {
            const cookieEnd = document.cookie.indexOf(";", cookieStart)
            if(cookieEnd == -1) {
                cookieEnd = document.cookie.length
            }
            cookieValue = decodeURICompoent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd))	
        }
        return cookieValue
    }
    // set设置一个cookie
    set: function(name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponet(name)+"="+encodeURIComponet(value)
        if(expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString()
        }
        if(path) {
            cookieText += ";path=" + path
        }
        if(domain) {
            cookieText += "; domain" + domain
        }
        if(secure) {
            cookieText += "; secure"
        }
        document.cookie = cookieText
    }
    // 删除已有的cookie
    unset: function(name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure)
    }
}

web存储

web存储机制最初作为HTML5的一部分被定义成API的形式，但又由于其本身的独特性与其他的一些原因而剥离了出来，成为独立的一个标准。web存储标准的API包括locaStorage对象和seesionStorage对象。它所产生的主要原因主要出于以下两个原因：

• 人们希望有一种在cookie之外存储回话数据的途径。
• 人们希望有一种存储大量可以跨会话存在的数据的机制。

sessionStorage 和 localStorage 属于浏览器对象模型BOM的对象window

sessionStorage 保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

localStorage

1. localStorage是什么

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

2. localStorage的优点：

• localStorage拓展了cookie的4K限制；
• localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；
• localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

3. localStorage的缺点：

• 浏览器的大小不统一，并且在IE8以上的IE版本才支持 localStorage 这个属性；
• 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；
• localStorage 在浏览器的隐私模式下面是不可读取的；
• localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
• localStorage 不能被爬虫抓取到

4. localStorage的操作

window.localStorage.username = 'hehe'            // 设置
window.localStorage.setItem('username', 'hehe')  // 设置
window.localStorage.getItem('username')          // 读取
window.localStorage.removeItem('username')       // 删除
window.localStorage.key(1)                       // 读取索引为 1 的值
window.localStorage.clear()                      // 清除所有

但需要注意的是，以上示例全是存储字符串格式的数据，当我们需要传输其他格式的数据时，我们就需要将这些数据全部转换为字符串格式，然后再进行存储：

const user = {name:"Srtian", age: 22}
localStorage.setItem("user", JSON.stringify(user))

在获取值的时候也需要将其转化回来：

var age = JSON.parse(localStorage.user)

5. localStorage储存数据的有效期与作用域

通过 localStorage 存储的数据时永久性的，除非我们使用 removeItem 来删除或者用户通过设置浏览器配置来删除，负责数据会一直保留在用户的电脑上，永不过期。

6. localStorage的作用域

localStorage 的作用域限定在文档源级别的（意思就是同源的才能共享），同源的文档间会共享 localStorage 的数据，他们可以互相读取对方的数据，甚至有时会覆盖对方的数据。当然，localStorage 的作用域同样也受浏览器的限制。

sessionStorage

sessionStorage 与 localStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候， sessionStorage 中的键值对就会被清空。

• Session Storage 只存储当前会话页的数据，且只有当用户关闭当前会话页或浏览器时，数据才会被清除。
• sessionStorage的基本语法

  // 保存数据到sessionStorage
  sessionStorage.setItem('name', 'Srtian');
  
  // 从sessionStorage获取数据
  var data = sessionStorage.getItem('name');
  
  // 从sessionStorage删除保存的数据
  sessionStorage.removeItem('name');
  
  // 从sessionStorage删除所有保存的数据
  sessionStorage.clear();

下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，写入的内容不会丢失：

// 获取文本输入框
var field = document.getElementById("field")

// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave")
}
// 监听文本输入框的 change 事件
field.addEventListener("change", function() {
  // 保存结果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value)
})

Storage API

总结

存储方式	作用与特性	存储数量及大小
cookie	1.存储用户信息，获取数据需要与服务器建立连接。 2.可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。 3.可设置过期时间。	最好将cookie控制在4095B以内，超出的数据会被忽略。
localStorage	1.存储客户端信息，无需请求服务器。 2.数据永久保存，除非用户手动清理客户端缓存。 3. 开发者可自行封装一个方法，设置失效时间。	5M左右，各浏览器的存储空间有差异。
sessionStorage	1.存储客户端信息，无需请求服务器。 2.数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。	同localStorage

区别：
|异同点|cookie|localStorage|sessionStorage|
|:–|:–|:–|:–|
|数据生命周期|默认是会话结束的时候。也可设置过期时间|永久存储，除非手动删除|会话结束时（当前页面关闭的时候，会自动销毁）|
|存储数据大小|4k左右|一般5M或更大|一般5M或更大|
|存储位置|保存在浏览器端，与服务器进行交互通信|都保存在客户端，不与服务器进行交互通信|都保存在客户端，不与服务器进行交互通信|
|作用域|在所有同源窗口中都是共享的|在所有同源窗口中都是共享的|不在不同的浏览器页面中共享，即使是同一个页面|

你的赏识是我前进的动力

• 支付宝
• 微 信