JavaScript的客户端存储-js教程-PHP中文网

JavaScript的客户端存储

伊谢尔伦

发布： 2016-11-21 13:38:15

原创

1376人浏览过

　一、前言：

　　客户端存储实际上就是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新版本的浏览器实现了；