前端存储

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协议下使用

你可能感兴趣的:(前端存储)