一、前言:
客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘;
二、存储的不同形式:
1、Web存储:localStorage 和 sessionStorage 代表同一个Storage对象--持久化的索引为字符串,值也是字符串的数组;
两者出来对存储的有效期和作用域不同,其他基本通用;且作用域都是文档源级别的,不能跨域存取;
localStorage : 存储的数据是永久性的,同源的文档间共享数据;可以读取或覆盖数据;但是受浏览器限制;
sessionStorage :作用域限制在窗口或标签页,标签页关闭后会删除所有数据;
两者都可以当做普通js对象使用,通过.key或[key]去设置和获取数据,新的浏览器还提供了正式的API:
setItem():设置对应的名称和值,形如localStorage.setItem("x",1);
getItem(): 传入名称获取对应的值,形如:localStorage.getItem("x");
removeItem():传入名称,删除对应数据; clear():清空所有存储的数据;
key() :与length联合使用 枚举所有名称:for(var i=0;i
2、cookie: cookie数据会自动在Web浏览器和Web服务器之间传输,因此服务器脚本可以读写存储在客户端的cookie值;
cookie的限制:每个Web服务器保存的cookie不能超过20个,每个cookie保存的数据不能超过4kb;
//保存cookie: function setCookie(name,value){ //对value值进行表面,转义分号,逗号和空白符; var cookie = name+""+encodeURIComponent(value); cookie += "; max-age="+3000;//设置有效期 毫秒数; cookie += ";path=/"; //设置作用域路径 cookie += ";domain="+domain;//作用域域名 只能是当前服务器的域; cookie += "; secure"; //设置此属性,则只有通过HTTPS或其他安全协议连接是才能传递cookie; document.cookie = cookie; //保存 } //改变与删除cookie都要使用相同的名字、路径和域; 改变时,值设为新的; 删除时,设置max-age=0; //读取所有cookie值 function getCookie(){ var cookies = {}; var all = document.cookie; if(all === ""){ return cookies; } var list = all.split("; "); for(var i in list){ var cookie = list[i]; var p = cookie.indexOf("="); cookies[cookie.substring(0,p)] = decodeURLComponent(cookie.substring(p+1)); } return cookies; }
3、客户端数据库(html5):IndexedDB:一个对象数据库;Chrome和FireFox新版本支持;
4、文件系统(HTML5): 可以操作本地文件系统进行读写文件和目录的操作; 目前只有Chrome新版本的浏览器实现了;