前端开发数据存储技术

浏览器端:
cookie
WebStorage(localStorage、sessionStorage)
indexedDB
服务器端:
session

cookie

Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。cookie只能保存字符串类型,以文本的方式。
它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
#session机制:
当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。

session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象),缺点:

(1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

(2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

(3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

cookie和session的区别:
1、cookie数据存放在客户的浏览器上,session数据放在服务器上
2、cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session
3、session会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie
4、单个cookie保存的数
据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie
5、建议将登录信息等重要信息存放为session,其他信息如果需要保留,可以放在cookie中
6、session保存在服务器,客户端不知道其中的信心;cookie保存在客户端,服务器能够知道其中的信息
7、session中保存的是对象,cookie中保存的是字符串
8、session不能区分路径,同一个用户在访问一个网站期间,所有的session在任何一个地方都可以访问到,而cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是访问不到的。

localStorge

localStorge比 cookie 存的更多,获取更方便,而且存储内容不会随请求发送给服务器,也就是存储在本地,不会和服务器产生联系,html5版本中新增的技术,会有兼容
sessionStorage:不会和服务器产生联系,html5版本中新增的技术,会有兼容
session 虽然需要 cookie 支持(通常存放加密过的 sessionId),但是不在浏览器端存放主要信息,而是在服务器端存放;
大小

最大存储容量为5M

有效期

将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用,只要你手动不清缓存或者removeItem,clear等操作,设置的值会一直存在

共享性

不同浏览器无法共享localStorage中的信息。相同浏览器同源的不同页面间可以共享相同的 localStorage。

应用场景

常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据

比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

sessionStorage

大小

最大存储容量为5M

有效期

数据在当前会话中保存下来,刷新页面数据依旧存在。关闭页面或浏览器后,sessionStorage 中的数据就会被清空。

共享性

不同浏览器无法共享sessionStorage中的信息。相同浏览器不同页面或标签页(即使同源)间无法共享sessionStorage的信息。

这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage在同源的同窗口中始终存在,也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一个页面,数据仍然存在,关闭窗口后,sessionStorage就会被销毁。

同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的

IndexDB和webSql

跟localstorage一样,indexeddb和websql均是在创建数据库的域名下才能访问。而且不能指定访问域名。存储时间也是永久,除非用户清除数据,可以用作长效的存储
indexeddb和websql没有大小限制,但是indexeddb的数据库超过50M的时候浏览器会弹出确认,当我们是在做一个离线应用,或者webapp的时候,可以考虑使用本地数据库中存取数据

建议如果有一些数据,服务器难以承载其压力,但又要与用户的信息绑定的话,可以使用localStorage存储一些状态,这样即能缓解服务端压力,也可以存储用户的数据

发布了3 篇原创文章 · 获赞 2 · 访问量 156

猜你喜欢

转载自blog.csdn.net/qq_41890576/article/details/104736960