前端储存技术

·  阅读 2833

客户端存储的概念

  1. web应用允许使用浏览器提供的API将数据存储在客户端电脑上;

  2. 客户端存储遵守“同源策略”,不同的站点页面之间不能相互读取彼此的数据;

  3. 在同一个站点的不同页面之间,存储的数据是共享的;

  4. 数据的存储有效期可以是临时的,比如在页面刷新之后,我们的所有数据都会被清空以及关闭浏览器数据就销毁; 也可以是永久的要用到本地存储技术,就可以在客户端电脑上存储任意时间;

  5. 在使用数据存储是需要考虑安全问题,比如银行卡账号密码

前端本地存储技术

把数据保存到磁盘中就是本地存储技术。本地存储的技术:大文件的离线存储(常见于大型游戏),本地数据库等。

前端存储数据的方式有四种:cookie、localStorage、sessionStorage和indexDB(存储容量大,可以存几百兆)。

1.cookie

存储cookie是浏览器提供的功能,cookie其实是存储在浏览器中的纯文本,浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的cookie。

前端创建和获取cookie的方式

创建cookie:

document.cookie="";值是字符串,字符串是有格式的,由键值对 key=value构成,键值对之间由一个分号和一个空格隔开。

获取cookie:这个方法只能获取非 HttpOnly 类型的cookie

let myCookie = document.cookie;

image.png

左边栏Cookies下方会列举当前网页中设置过cookie的域都有哪些。上图中只有一个域。而右侧区域显示的就是某个域下具体的 cookie 列表,对应上图就是该域下设置的cookie。

当网页要发http请求时,浏览器会先检查是否有相应的cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的,而且每一次http请求浏览器都会自动帮我们做,但是需要满足条件才会发送该域下的cookie,首先本地已经缓存有cookies 然后根据请求的URL来匹配cookies的domain、path属性,如果domain、path属性都符合才会发送。

cookie的属性

每个cookie都有一定的属性,如什么时候失效,要发送到哪个域名,哪个路径等。这些属性是通过cookie选项来设置的,expires、domain、path、secure、HttpOnly。在设置任一个cookie时都可以设置相关的这些属性也可以不设置,这时会使用这些属性的默认值。在设置这些属性时,属性之间由一个分号和一个空格隔开。

"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"
复制代码

expires=Thu, 25 Feb 2016 04:18:00 GMT表示cookie将在这个时间之后失效,对于失效的cookie浏览器会清空。如果没有设置该选项,则默认有效期为session,即会话cookie,这种cookie在浏览器关闭后就没有了。

domain 和 path,domain是域名,path是路径,两者加起来就构成了 URL,domain和path一起来限制 cookie 能被哪些 URL 访问。domain的默认值为设置该cookie的网页所在的域名,path默认值为设置该cookie的网页所在的目录。

secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时,包含 secure 选项的 cookie才能被发送至服务器。默认情况下,cookie不会带secure选项(即为空)。所以默认情况下,不管是HTTPS协议还是HTTP协议的请求,cookie 都会被发送至服务端。但要注意一点,secure选项只是限定了在安全情况下才可以传输给服务端,但并不代表你不能看到这个 cookie。如果想在客户端即网页中通过 js 去设置secure类型的 cookie,必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。

httpOnly选项用来设置cookie是否能通过 js 去访问。默认情况下,cookie不会带httpOnly选项(即为空),所以默认情况下,客户端是可以通过js代码去访问(包括读取、修改、删除等)这个cookie的。当cookie带httpOnly选项时,客户端则无法通过js代码去访问(包括读取、修改、删除等)这个cookie。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的,这种类型的cookie只能通过服务端来设置。

size选项是cookie对象的值字符串的字符个数。

2.LocalStorage和SessionStorage

1.LocalStorage和SessionStorage是window的两个属性,都代表同一个Storage对象;

2.localStorage和sessionStorage的API:

setItem(string key, value):将对应的键值对的key和value传递进去,可以实现数据存储;

getItem(string key):将键传递进去,可以获取对应的值;

removeItem(sring key):将键传递进去,可以删除对应的值;

clear():删除所有的缓存值,不需要参数;

length:属性,获取键值对总数;

key():传入位置数,获取存储的值的键;

sessionStorage.setItem('name', 'jzx');
sessionStorage.setItem('age', 26);
 
let name = sessionStorage.getItem('name');
let age = sessionStorage.getItem('age');
console.log(name, age);
复制代码
localStorage.setItem('username', 'hyomin');
localStorage.setItem('age', 18);
 
let username = localStorage.getItem('username');
let age = localStorage.getItem('age');
console.log(username, age);
复制代码

LocalStorage

LocalStorage:永久性保存

window.localStorage.setItem(string key, value); //保存

window.localStorage.getItem(string key);//获取

window.localStorage.clear();//清空

window.localStorage.removeItem(sring key)//根据键得到值

window.localStorage.length :返回一个整数,表示存储在 LocalStorage 对象中的数据项(键值对)数量。

window.localStorage.key(int index) :返回当前LocalStorage 对象的第index序号的key名称。若没有返null。

SessionStorage

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

window.sessionStorage.length :返回一个整数,表示存储在 sessionStorage 对象中的数据项(键值对)数量。

window.sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返null。

window.sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

window.sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

window.sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。

window.sessionStorage.clear() :清除 sessionStorage 对象所有的项。

localStorage和sessionStorage区别

localStorage和sessionStorage存储数据的有效期和作用域不同:

(1)localStorage

​ localStorage:存储的数据是永久的,当然用户可以清除这些缓存数据的; 比如清除历史记录就可以清除这些数据;

​ localStorage的作用域限制在文档源; 文档源由协议、域名、端口三者来确定;下面的URL就拥有不同的文档源:

www.xxxx.com //协议http,域名www.xxxx.com

www.xxxx.com //协议https,和上面不同

www.figfting.com.cn/ //和上面域名不同

www.figfting.com.cn:81/ //和上面端口不同,默认端口是80

​ 这种情况下,localStorage存储的数据是不能相互访问的; 即便他们来自同一台服务器;

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

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

(2)sessionStorage

​ sessionStorage存储的数据在窗口或标签关闭时,数据就会丢失; 在一个标签前进后退时数据不会丢失,这样我们就可以获取上次访问时产生的相关信息; 随着现代浏览器越来越强大,具体的声明周期还和浏览器功能有关;

​ sessionStorage在localStorage的同源策略基础上,有更严格的限制:

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

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

​ 窗口是指顶级窗口,如果是多个iframe,他们之间共享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;

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改