1.Session Storage
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
使用:
存储值:sessionStorage.setItem("key", "value")
删除值(单个):sessionStorage.removeItem("key")
删除全部值:sessionStorage.clear()
2.Local Storage
在html5中,新加的特性,主要是用来作为本地存储使用的的,解决了cookie存储空间不足的问题,localstorage中一般浏览器支持的5M,这个在不同的浏览器中localstorage会有所不同。localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage
优点:
1、localStorage拓展了cookie的4K限制
2、localStorage可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但局限是只有高版本的浏览器中才支持的
局限:
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、localStorage只支持string类型的存储,想要存储JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
使用:
保存:
window.localStorage.setItem(key, value)
window.localStorage[key]=value
window.localStorage.key = value
获取:
var value = window.localStorage.getItem(key)
var value = window.localStorage[key]
var value = window.localStorage.key
删除:
window.localStorage.removeItem(key)
window.localStorage.clear()
获取键:
window.localStorage.key()
3.Cookie
1.什么是cookie,cookie的作用?
Cookie 用于存储 web 页面的用户信息。
Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器发送一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。
主要过程:
客户端发送一个请求到服务器--->服务器发送一个httpResponse响应到客户端其中包含set-cookie的头部-->客户端保存cookie,之后向服务器发送请求时,httpRequest请求中会包含一个cookie的头部-->服务器返回响应
属性项:
name=val name不能和其他的属性想名字一样
Expires 过期时间,在设置的某个时间点后改cookie就会失效
Domain 生成该cookie的域名
Path 该cookie是在当前的哪个路径下生成的
Secure 如果设置了这个属性,那么只会在SSH连接时才会回传该cookie
2.cookie的域名和路径
Cookie是不可以跨域名的,隐私安全机制禁止网站非法获取其他网站的Cookie。
正常情况下,同一个一级域名下的两个二级域名也不能交互使用Cookie,比如test1.mcrwayfun.com和test2.mcrwayfun.com,因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie,需要设置Cookie的domain参数为.mcrwayfun.com,这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie
path属性决定允许访问Cookie的路径。比如,设置为"/"表示允许所有路径都可以使用Cookie
3.cookie的获取
var cookies = document.cookie
4.Indexed DB
5.Web SQL
6.Service Worker
主要是为了提高web app的用户体验,可以实现离线应用消息推送等等一系列的功能, 可以看做是一个独立于浏览器的Javascript代理脚本, 在离线状态下也能提供基本的功能。 出于安全性的考虑,Service Worker 只能在https协议下使用