前端存储之Cookie、Session、localStorage、sessionStorage

Cookie

什么是cookie?
Cookie是由服务器端生成,发送给浏览器,浏览器自动会将Cookie以key/value保存到某个目录下的文本文件内,下次请求同一网站时也会自动发送该Cookie给服务器(添加在HTTP请求头部)。

cookie有什么特点?
①可以通过 expires 、max-age来设置有效期(不设置默认临时存储)
document.cookie = 'expires=时间/max-age=秒'
②不可跨域名 不同域名之间不可访问各自cookie
③cookie内存大小限制为4K
④cookie是不安全的
⑤字符串形式存储

如何使用cookie?
①设置
document.cookie = 'username=xxx;userid=yyy'
②获取
var value = document.cookie
③删除
设置expires小于当前时间即可

Session

什么是session?
Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当客户端关闭会话,或者 Session 超时失效时会话结束。

Session有什么特点?
①存储在服务器端
②有效期短 客户端关闭或者超时都会失效
③存储容量远大于Cookie

Session和Cookie有什么关联呢?
用户第一次请求登录服务器的时候,服务器根据用户提交的相关信息,创建创建对应的 Session ,请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器,浏览器接收到服务器返回的 SessionID 信息后,会将此信息存入到 Cookie 中,同时 Cookie 记录此 SessionID 属于哪个域名。
第二次访问时,发送请求之前浏览器会自动判断此域名下是否存在 Cookie 信息,如果存在自动将 Cookie 信息也发送给服务端,服务端会从 Cookie 中获取 SessionID,再根据 SessionID 查找对应的 Session 信息,如果没有找到说明用户没有登录或者登录失效,如果找到 Session 证明用户已经登录可执行后面操作。

localStorage

什么是localStorage?
localStorage是HTML5新加的一个特性,用来作为本地存储使用,解决了Cookie存储不足的限制,localStorage一般限制为5M。不同于Cookie的是,localStorage不会和请求数据一起发送到服务器端。

localStorage有什么特点?
①需要高版本的浏览器才支持
②字符串形式存储
③在浏览器隐私模式下不可读取
④不能被爬虫抓取到
⑤永久性存储 除非手动删除,否则关闭浏览器下次打开仍然存在

如何使用localStorage?
①设置
localStorage.setItem(key, value) //键值对
localStorage.key = value
localStorage['key'] = value
②获取
localStorage.getItem(key)
var value = localStorage.key
var value = localStorage['key']
③删除
localStorage.clear() //删除所有键值对
localStorage.removeItem(key) //删除指定键值对
④其他
localStorage.length //获取键值对数量
localStorage.key(index) //获取当前索引的键值对的键值名称 结合length可以遍历键值对

sessionStorage

什么是sessionStorage?
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

如何理解一个session?
sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页,通过其它方式新开的窗口或标签不认为是同一个session。

sessionStorage有什么特点?
①字符串形式存储
②会话结束即被自动清除
③高版本浏览器支持

如何使用sessionStorage?
①设置
sessionStorage.setItem(key, value) //键值对
sessionStorage.key = value
sessionStorage['key'] = value
②获取
sessionStorage.getItem(key)
var value = sessionStorage.key
var value = sessionStorage['key']
③删除
sessionStorage.clear() //删除所有键值对
sessionStorage.removeItem(key) //删除指定键值对
④其他
sessionStorage.length //获取键值对数量
sessionStorage.key(index) //获取当前索引的键值对的键值名称 结合length可以遍历键值对

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章