在浏览器存储数据
咿呀咿呀哟
207
一、cookie
1、cookie的作用
说到cookie，其实cookie有两个主要功能，第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态，而第二个功能也就是我们现在也经常使用cookie在客户端存储一些其它的数据
2、cookie的构成
一般来说，cookie是由浏览器保存的以下几块信息构成的
（1）名称：一个唯一确定cookie的名称
（2）值：存储在cookie中的字符串值，值必须被URL编码
（3）域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
（4）路径：对于指定域中的路径，应该向服务器发送cookie
（5）失效时间：表示cookie何时应该被删除的时间戳
（6）安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器
3、如何使用cookie存储数据
一般来说，有两种方式可以生成cookie，一种是服务器发送http响应时指定Set-Cookie进行指定，另一种我们可以使用js生成cookie
4、cookie的缺点
虽然cookie可以存储一些数据，但是仍然存储下面一些缺点
（1）cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源
（2）cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB
（3）cookie的安全性，cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低
二、Web存储机制
接下来，我们要说一下html5中的存储啦，主要是sessionStorage和localStrorage
1、什么是Web存储
Web
Storage也是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据
一般来说，Web
Storage包含了两种对象的定义，sessionStorage和globalStorage，而现在localStorage在修订过的html5规范中作为持久保存客户端数据的方案取代了globalStorage，接下来，让我们看一下它们有什么区别啦
2、sessionStorage
（1）什么是sessionStorage
sessionStorage对象是存储特定于某个会话的数据，也就是数据只保存到浏览器关闭，这个对象就像会话cookie，也会在浏览器关闭后消失，存储在sessionStorage中的数据可以跨越页面刷新而存在
（2）如何使用sessionStorage存储数据
由于sessionStor
age对象是Storage的一个实例，所以存储数据时可以使用setItem()或者直接设置新的属性来存储数据
// 使用方法存储数据 sessionStorage.setItem("ifClick", "true"); // 使用属性存储数据 sessionStorage.ifClick =
"true";
当我们要获取某个数据的时候，可以使用getItem来获取数据
sessionStorage.getItem("ifClick");
我们现在又成功获取到ifClick的值啦，当然也可以通过length属性和key()方法来获取sessionStorage的值
（3）sessionStorage的特点
a、同源策略限制，若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下
b、单标签页限制，sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据
c、只在本地存储，seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据
d、存储方式，seesionStorage的存储方式采用key、value的方式
e、存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下
3、localStorage
（1）什么是localStorage
localStorage对象在修订过的html5规范中作为持久保存客户端数据的方案却带了globalStorage，与globalStorage不同，不能给localStorage指定任何访问规则，因为规则已经事先订好了，要访问同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口
（2）如何使用localStorage存储数据
由于localStorage是Storage的实例，可以像使用sessionStorage一样来使用它
localStorage.setItem("ifClick","true");
当我们要获取数据的时候，可以像下面这样获取
localStorage.getItem("ifClick");
存储在localStorage中的数据和存储在globalStorage中的数据一样，都遵循相同的规则，数据保留到通过js删除或者是用户清除浏览器缓存
（3）localStorage的特点
a、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
b、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
c、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
最后，要和大家说的是，sessionStorage和localStorage都克服了cookie的一些限制，它们都有很多共同的特点，localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
