Cookie 与Web Storage

最新推荐文章于 2023-10-15 18:22:18 发布

meimeilive

最新推荐文章于 2023-10-15 18:22:18 发布

阅读量182

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/meimeilive/article/details/81699562

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

数据的存储两种方式：Cookie 与Web Storage

Cookie

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

Cookie意为“甜饼”，是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准，所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。

由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。也就是就是当一个用户通过 HTTP 协议访问一个服务器的时候，这个服务器会将一些 Key/Value 键值对返回给客户端浏览器，并给这些数据加上一些限制条件，在条件符合时这个用户下次访问这个服务器的时候，数据又被完整地带回给服务器。

ps:查看某个网站的Cookie可以用 alert (document. cookie)

特点：

1、不可跨域名性

Cookie在性质上是绑定在特定的域名下的，当设置了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie，这确保了储存在cookie中的信息智能让批准的接收者访问，而不能被其他域访问。可以通过document.cookie属性来设置cookie

2、路径（path）

domain属性决定运行访问Cookie的域名，而path属性决定允许访问Cookie的路径（ContextPath）。

注意：页面只能获取它属于的Path的Cookie。例如/session/test/a.jsp不能获取到路径为/session/abc/的Cookie。使用时一定要注意。浏览器会将domain和path都相同的cookie保存在一个文件里，cookie间用*隔开。

3、安全属性

HTTP协议不仅是无状态的，而且是不安全的。使用HTTP协议的数据不经过任何加密就直接在网络上传播，有被截获的可能。使用HTTP协议传输很机密的内容是一种隐患。如果不希望Cookie在HTTP等非安全协议中传输，可以设置Cookie的secure属性为true。浏览器只会在HTTPS和SSL等安全协议中传输此类Cookie。

提示：secure属性并不能对Cookie内容加密，因而不能保证绝对的安全性。如果需要高安全性，需要在程序中对Cookie内容加密、解密，以防泄密。

优点

可配置到期规则： Cookie 可以在浏览器会话结束时到期，或者可以在客户端计算机上无限期存在，这取决于客户端的到期规则。
不需要任何服务器资源： Cookie 存储在客户端并在发送后由服务器读取。
简单性： Cookie 是一种基于文本的轻量结构，包含简单的键值对。
数据持久性：虽然客户端计算机上 Cookie 的持续时间取决于客户端上的 Cookie 过期处理和用户干预，但Cookie 通常是客户端上持续时间最长的数据保留形式。

弊端

Cookie数量和长度的限制：每个域的cookie总数是有限的，IE6或更低版本最多20个cookie；IE7和之后的版本最后可以有50个；Firefox最多50个；chrome和Safari没有做硬性限制。cookie的长度也有限制，最好将cookie控制在4095B以内。否则会被截掉。
安全性问题： Cookie 把所有要保存的数据通过 HTTP 协议的头部从客户端传递到服务端，又从服务端再传回到客户端，所有的数据都存储在客户端的浏览器里，所以这些 Cookie 数据可以被访问到，如果cookie被人拦截了，那人就可以取得所有的信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
性能问题：由于所有cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响到特定域的请求性能

Web Storage

由于HTML4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据。为了破解Cookie的一系列限制，HTML5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS更有效率。 HTML5支持两种的WebStorage：

　　　　永久性的本地存储（localStorage）
　　　　会话级别的本地存储（sessionStorage）

二者的差异主要是数据的保存时长及数据的共享方式。

localStorage

一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

　　特点：① 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

　　　　　② 数据不会随着Http请求发送到后台服务器；

　　　　　③ 存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB。

sessionStorage

在会话期内有效，数据在浏览器关闭后自动删除；

　　特点：会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据

判断浏览器是否支持：

if (window.localStorage) {
                // 浏览器支持 localStorage
            }else{
                // 不支持    
            }
            
            if (window.sessionStorage) {
                // 浏览器支持 sessionStorage
            }else{
                // 不支持
            }

无论是localStorage 还是 sessionStorage均支持4种方法：setItem(key,value) 、getItem(key)、removeItem(键名)、clear()；以localStorage为例：

（1）localStorage.setItem(键名，键值)在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。如：

        localStorage.setItem("name", "张三");      //存储键名为name和键值为"张三"的数据到本地
        localStorage.setItem("age", "28");        //存储键名为age和键值为"28"的数据到本地

　　（2）localStorage.getItem(键名) 读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：

    var data = localStorage.getItem("name");
    alert(data);//张三

　　（3）localStorage.removeItem(键名)移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。如：

    var data2 = localStorage.removeItem("name");//从本地存储中移除键名为name的数据
    alert(data2); //undefined

　　（4）localStorage.clear() 移除本地存储所有数据。如：

    localStorage.clear() 移除本地存储所有数据。如：
    localStorage.clear();      //保存着的"age/28"和"name/张三"的键/值对也被移除了，所有本地数据拜拜

另外，还有一个在Html5中被取代的globalStorage。

globalStorage

跨越会话存储数据。要使用globalStorage对象，首先要指定哪些域可以访问该数据，通过方括号标记来实现：

//保存数据

globalStorage["wrox.com"].name = "Vicky";//获取数据

var name = globalStorage["wrox.com"].name;

在使用globalStorage对象时最好要指定域名，如果事先不能确定域名，那么使用location.host作为属性名比较安全。

如果不使用removeItem（）或者delete删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保存在磁盘上，因此globalStorage很适合在客户端存储文档或者长期保存用户偏好设置。

总结一下：

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web storage和cookie的区别

共同点：都是保存在浏览器端，且同源的。

1、存储大小容量：

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去（cookie在浏览器和服务器间来回传递），这样无形中浪费了带宽。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大，同时不会自动把数据发给服务器，仅在本地保存。
2、方法

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

3、数据有效期

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持（会话级别存储）；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4、作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的，不可以跨域调用。

5、 cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下

cookie也是不可以或缺的，cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

参考：