在客户端存储数据可以使用的技术:
(1)Cookie技术:浏览器兼容性好,不能超过4KB,操作复杂
(2)Flash存储:依赖于Flash播放器
(3)H5 WebStorage:不能超过8MB,操作简单
(4)IndexDB:可存储大量数据,还不是标准技术
Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。
此外,客户端也用使用 cookies 存储数据。因而,cookies 常被用于存储一些通用的数据,如用户的首选项设置。
Cookies 的优点
- 能用于和服务端通信
- 当 cookie 快要自动过期时,我们可以重新设置而不是删除
Cookies 的缺点
- 增加了文档传输的负载
- 只能存储少量的数据
- 只能存储字符串
- 潜在的 安全问题
- 自从有 Web Storage API (Local and Session Storage),cookies 就不再被推荐用于存储数据了
浏览器支持
所有主流浏览器均支持 Cookies.
sessionstorage,localstorage 在浏览器中存储当前用户专用的数据;例如: 访问历史;购物车;内容定制,样式定制...
Session:会话: 浏览器从打开某个网站的一个页面开始,中间可能打开很多个页面,直到关闭浏览器,整个过程称为"浏览器与WEB服务器的一次会话“ |
WebStorage技术中,浏览器为用户提供两个对象
1、window.sessionStorage:类数组对象: 会话级数据存储
在浏览器进程所分得内存中存储一次WEB会话的数据
可供此次会话的页面共同使用,浏览器一旦关闭就消失.
作用: 在同一个会话中所有页面之间共享数据
示例: 登录用户名/登录用户编号
sessionStorage[key]=val; //保存一个数据
sessionStorage.setItem(key,val); //保存一个数据
var val = sessionStorage[key]; //读取一个数据
var val = sessionStorage.getItem(key); //读取一个数据
sessionStorage.removeItem(key); //删除一个数据
sessionStorage.clear() //清除数据
sessionStorage.length; //数据个数
sessionStorage.key(i); //获取第i个key
*****客户端技术不要保存安全性比较高的数据*****
2、localStorage,本地存储对象(跨会话级存储)
在浏览器能管理外存(磁盘)中存储用户数据,可供此次会话及后续会话的页面共同使用;即使浏览器关闭了也不会消失--永久存在.
作用:用户样式风格(qq空间)
localStorage[key]=val; //保存一个数据
localStorage.setItem(key,val); //保存一个数据
var val = localStorage[key]; //读取一个数据
var val = localStorage.getItem(key); //读取一个数据
localStorage.removeItem(key); //删除一个数据
localStorage.clear() //清除数据
localStorage.length; //数据个数
localStorage.key(i); //获取第i个key
localStorage中若数据发生了修改,会触发事件 window.onstorage事件,可以监听事件,实现监视localStorage数据改变目的.
----不能监视sessionStorage数据修改.