cookie

cookie是浏览器常用的缓存技术，它保存的是JSON字符串，它一般设置有有效期，当达到达到有效期时，存储的数据就会从存储中消失。举一个例子：比如我们在浏览器登录虎牙直播，下次同样在这台计算机上打开这个网站，它会记住我们的登录信息，不用再次登录，但是过了一个月以后你发现你再次登录时显示未登录的状态，这就是cookie有限期到了。

因为它是很早就存在的技术，在JS脚本中系统未直接给我们提供缓存数据的增删改查等方法。这些都需要我们前端工程师自己去封装这些技术。

简单创建一个cookie:

 用户<input type="text" value="" id="user">密码<input type="text" value="" id="pwd"><button onclick="cj()">创建一个cookie</button><script>var user=document.getElementById("user")var pwd=document.getElementById("pwd")function cj(){//我们设置一个cookie有效时间var dt = new Date().getTime()//设置有效时间为七天var cookiedt=new Date(dt+60*60*24*7)//创建cookiedocument.cookie=`user${user.value}&pwd${pwd.value};expires=${cookiedt}`}</script>

我们在页面输入信息后，点击创建就可以在调试器中看到我们创建的这个cookie，

除了JS脚本创建cookie外，我们还可以通过 Set-Cookie 头字段给浏览器给当前网站设置 cookie。

Set-Cookie: name=zs

除了expires有限期外，他还有一些属性需要知道：

HttpOnly：设置后，只能通过 HTTP 响应报文的 Set-Cookie 来新增或更新 cookie ，客户端无法通过脚本的方式来读写 cookie。

Max-Age：cookie 的有效时间长度，单位为秒。通过设置小于等于 0 的数字，可以让一个 cookie 失效。如果 Max-Age 和 Expires 同时存在，以 Max-Age 为准。 Expires使用的时间格式的字符串。

Path:设置 cookie 的路径作用域。

cookie的修改和删除我就不演示了，大家可以自己锻炼锻炼自己的js水平，封装函数操作cookie数据。

localStorage和sessionStorage

两者都是H5新出的缓存技术，他们代表同一个Storage对象；系统提供了一系列方法来操作缓存数据，非常的方便。

让我们看一下localStorage存储的数据：

很明显与cookie存储的JSON字符串相比，storage对象采用键值对存储。

简单介绍一下localStorage和sessionStorage的API：

setItem()：将对应的名字和值传递进去，可以实现数据存储；

举个例：

window.localStorage.setItem("user","张三")

getItem()：将名字传递进去，可以获取对应的值；

removeItem()：将名字传递进去，可以删除对应的值；

clear()：删除所有的缓存值，不需要参数；

length：属性，获取键值对总数；

key()：传入位置数，获取存储的值的名字；

简单对比一下localStorage和sessionStorage：localStorage是永久性保存数据，除非你自己删除；

sessionStorage:关闭浏览器数据就自动全部删除。

总结：

localStorage、sessionStorage、cookie三者的区别

（1）存储大小

cookie数据大小不能超过4k ；

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；

（2）有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除；

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

（3）数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

（4）作用域

localStorage的作用域限制在文档源的；

localStorage同源的文档之间可以相互访问和修改相同名称的数据；

localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问；会得到‘Invalid Date’；

sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：

他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；

但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；

这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage；

前端的三种缓存技术cookie、localStorage、sessionStorage相关推荐

web存储三种方式：cookie、sessionStorage、localStorage
cookie.sessionStorage.localStorage 1. Cookies 存储到浏览器中面向服务器同一个服务器可以共享Cookies 产生于服务器端实例方法: set() ge ...
前端性能优化之缓存技术
缓存一直以来都是用来提高性能的一项必不可少的技术 , 利用这项技术可以很好地提高web的性能. 缓存可以很有效地降低网络的时延,同时也会减少大量请求对于服务器的压力. 接下来这篇文章将会详细地介绍在w ...
三种编码器技术详解：各有利弊，如何选择？
点击上方"大鱼机器人",选择"置顶/星标公众号" 福利干货,第一时间送达! 在多种应用中,旋转编码器都是组成运动控制反馈回路的关键元器件,包括工业自动化设备和过 ...
.net session 有效时间_Python中requests模拟登录的三种方式(携带cookie/session进行请求网站)...
这篇文章主要介绍了python中requests模拟登录的三种方式(携带cookie/session进行请求网站),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋 ...
ZigBee网络数据传递流程_蓝牙、Wifi与ZigBee三种，这三种无线传输技术，谁能一统天下...
智能产品种类越来越多,运用在智能家居上的技术也越来越成熟.然而在无线通信协议上却一直无法做到统一,从目前的情况来看,短期内是无法实现这一愿望的了.既然如此,我们何不另辟蹊径,在这些标准中,选择优势最大 ...
Android 系统（188）---In-Cell、On-Cell、OGS三种屏幕技术
In-Cell.On-Cell.OGS三种屏幕技术手机屏幕在生产过程中需要对保护玻璃,触摸屏.显示屏着三部分进行两次贴合.如果采用框贴显示效果将大打折扣,而如果采用全贴合良品率又是一个问题.由于保护 ...
结构光、双目、ToF——三种3D技术对比
本文虽然命名为对比文档,但是对比意义不是特别强烈的内容仍不在少数--如三种3D技术的误差等部分--换言之,本文旨在通过对比的形式对三种3D技术的特点和特性进行总结.资料主要来自于网络,部分相关参考文献 ...
【高精度定位】关于GPS、RTK、PPK三种定位技术的探讨
高精度定位通常是指亚米级.厘米级以及毫米级的定位,从市场需求来看,定位的精度越高往往越好."高精度.低成本"的定位方案无疑将是未来市场的趋势. 在物联网时代,大多数的应用或多或少都 ...
光复用技术中三种重要技术_三种复用技术
三种复用技术在光纤通信中,复用技术被认为是扩展现存光纤网络工程容量的主要手段. 复用技术主要包括时分复用 TDM ( Time Division Multiplexing )技术.空分复用 SDM ...
iOS- NSThread/NSOperation/GCD 三种多线程技术的对比及实现
1.iOS的三种多线程技术 1.NSThread 每个NSThread对象对应一个线程,量级较轻(真正的多线程) 2.以下两点是苹果专门开发的"并发"技术,使得程序员可以不再去关心 ...

前端的三种缓存技术cookie、localStorage、sessionStorage

cookie

localStorage和sessionStorage

总结：

前端的三种缓存技术cookie、localStorage、sessionStorage相关推荐

最新文章

热门文章