在浏览器中,我们常见到的存储对象,分别有localStorage,sessionStorage,cookie。这三者同样能在浏览器中存储数据,但是也存在着各自的特点,在不同的场景中运用。
首先是localStorage和sessionStorage,这两者比较相近
通用的API
localStorage和sessionStorage有很多通用的API
以localStorage为例
- setItem()
该方法传入两个参数,第一个参数表示传进去的值要存储在哪个属性名上,第二个参数表示要传进去的值
如果传入了第一个参数为对象里面原有的属性,那就会覆盖原来的值
当使用该方法传入一个对象时,因为localStorage目前只支持传入字符串,所以传入的内容会变为"[object Object]"
除了这种方法之外,也可以使用点运算符来设置,当然也可以通过ES6中的方括号的写法来设置
window.localStorage.text='content'
let t='text'
window.localStorage[t]='content'
-
getItem()
该方法传入一个参数,表示要获取的值对应的属性名
-
removeItem()
该方法传入一个参数,表示要删除的值对应的属性名
-
clear()
clear方法用于清空localStorage对象里面的属性
localStorage
localStorage是只读的,不能直接修改其属性,要通过相应的API来修改
localStorage用于保存当前网站在本地浏览器的信息,保存的数据没有期限,除非手动删除。在localStorage中保存的数据,即使关闭窗口重新打开也不会被消失。(sessionStorage在关闭窗口后保存的数据会消失)
要注意的是,同一个域名共享一个localStorage对象,当然,同一域名但是不同浏览器是不共享一个localStorage对象的
通过window.localStorage
来获取localStorage对象
局限
- localStorage无法被爬虫抓取到
- localStorage本质上是对字符串的读取,如果存储内容过多的话会消耗内存空间,导致页面变卡
- 存储的值限定为字符串类型,若要存储json格式要进行转换
- 有一些浏览器不支持,比如IE8以上才支持localStorage
为localStorage设置过期时间
相对于sessionStorage来说,localStorage没有过期时间,但是如果我们想使用localStorage来设置过期时间,可以通过修改其set方法和get方法来实现
localStorage空间满了的处理方法
如果localStorage存满了或者存进去的数据大于localStorage对象存储数据的最大容量的话,那么就会出现报错
https://www.cnblogs.com/kidney/p/9058352.html
sessionStorage
sessionStorage和localStorage类似,可以临时保存在同一窗口(或标签页)的数据,但是与localStorage不同的是,sessionStorage的有效时间是一个会话,在关闭窗口或者标签页的时候数据会被清除
但是sessionStorage在当前标签页不关闭调转的情况下,还是能保存着的
sessionStorage和localStorage一样,存储的空间一般为5MB
上面两个对象存储数据的问题
在控制台中就能修改这些数据,所以不应该将敏感数据放在这两个对象中
XSS(Cross Site Scripting)
XSS攻击全称跨站脚本攻击,是为了区别于层叠样式表CSS所以使用XSS作为缩写
使用cookie,localStorage,sessionStorage时要注意是否有代码存在XSS注入的风险
攻击类型
- 非持久型
是指发生请求时,XSS代码出现在请求URL中,作为参数提交到服务器,服务器解析并响应。响应结果中包含XSS代码,最后浏览器解析并执行。
举个例子
`${url}?name=<script>alert(111)</script>`
- 持久型
存储型XSS,也叫持久型XSS,主要是将XSS代码发送到服务器(不管是数据库、内存还是文件系统等。),然后在下次请求页面的时候就不用带上XSS代码了。最典型的就是留言板XSS。用户提交了一条包含XSS代码的留言到数据库。当目标用户查询留言时,那些留言的内容会从服务器解析之后加载出来。览器发现有XSS代码,就当做正常的HTML和JS解析执行。XSS攻击就发生了。
比如在某个页面上有留言版,我们在留言上写上这样的内容
<script>alert(1111)</script>
在下次用户打开页面的时候,就会先弹出1111(如果没有对该攻击做出防御的话)
cookie
简介
由于HTTP本身是无状态的,服务器无法记住发送请求的客户端。cookie实际上是一小段文本信息(只有4k大小),如果服务器要记住发起请求的用户的状态,就可以使用cookie来实现。
当客户端向服务器端发送请求的时候,服务器端向客户端发回一个cookie,而客户端将该cookie保存下来,每次发送请求的时候带上这个cookie,因为服务器端也存有该cookie,所以可以通过检查来cookie来确认用户的状态。
过程
当用户发起登录请求时,cookie的设置会经历下面的过程
- 客户端发送一个请求到服务器
- 服务器发送一个http响应到客户端,其中包括set-cookie的头部
- 客户端保存响应中的cookie,再向服务器发送请求,请求中包含cookie的头部
- 服务器返回响应数据
属性
name=value
键值对,可以设置要保持的key/value,要注意的是这里的name不能和其他属性重名
Expires
该属性用来设置cookie的有效期。cookie中的maxAge用来表示该属性,单位为秒。
Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值,分别为正数,负数和0。
如果maxAge为正数,则cookie会在对应的时间结束后自动失效。浏览器会将maxAge为正数的cookie写入对应的cookie文件中(每个浏览器的存放位置不同)。只要在该时间内,不管用户重新打开浏览器甚至是电脑,都还是可以保持登录状态的。
如果maxAge为0,则表示立即删除cookie,一旦执行该方法,cookie会马上失效。
如果maxAge为负数,则cookie会在浏览器关闭的时候失效,于为0的情况不同的是,为负数的情况下,cookie还会保持一段时间。
domain
该属性用来设置生成cookie的域名
cookie无法跨域名使用,只能在当前域名下使用
正常情况下,同一个一级域名下的两个二级域名也不能交互使用cookie,比如test1.mcrwayfun.com和test2.mcrwayfun.com,因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie,需要设置Cookie的domain参数为.mcrwayfun.com,这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie
path
path属性决定允许访问Cookie的路径。比如,设置为"/"表示允许所有路径都可以使用Cookie
secure
http除了是无状态的外,还是不安全的。信息不经任何处理就会在网络上传输。可以通过将cookie的secure属性设置为true来让浏览器只在https和SSL中传输此类cookie
修改删除cookie
HttpServletResponse提供的Cookie操作只有一个addCookie(Cookie cookie),所以想要修改Cookie只能使用一个同名的Cookie来覆盖原先的Cookie。如果要删除某个Cookie,则只需要新建一个同名的Cookie,并将maxAge设置为0,并覆盖原来的Cookie即可。
新建的Cookie,除了value、maxAge之外的属性,比如name、path、domain都必须与原来的一致才能达到修改或者删除的效果。否则,浏览器将视为两个不同的Cookie不予覆盖。
保存位置
如果不在浏览器中设置过期事件,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件,cookie会被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期事件结束才消失。
三者的对比
- 大小
对于localStorage和sessionStorage来说,存储的大小是相近的,大概为5MB,而cookie相对较小,只有4KB左右 - 清除方式
对于localStorage来说,要清除它只能通过其本身的API;
而对于sessionStorage来说,除了和localStorage同样的清除方法,将标签页关闭也能清除它;
对于cookie来说,在上文也提到了,HttpServletResponse提供的Cookie操作只有一个addCookie,如果要彻底清除cookie,要么等待cookie的有效时间到达,要么新建一个同名的cookie并将maxAge设置为0