一、前言:

  客户端存储实际上就是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<storage.length;i++) {storage.key(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新版本的浏览器实现了;

        

JavaScript的客户端存储的更多相关文章

  1. 《javascript高级程序设计》 第23章 离线应用与客户端存储

    23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB   23.1 离线检 ...

  2. 《JavaScript》web客户端存储

    Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...

  3. JavaScript权威指南--客户端存储

    客户端存储web应用允许使用浏览器提供的API实现将数据存储在用户电脑上. 客户端存储遵循“同源策略”,因此不同站点的页面是无法读取对于存储的数据.而同一站点的不同的页面之间是可以互相共享存储数据的. ...

  4. JavaScript获取客户端计算机硬件及系统等信息的方法

    JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...

  5. js023-离线应用与客户端存储

    js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...

  6. Web - 客户端存储的几种方式

    客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...

  7. HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

  8. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  9. 离线应用与客户端存储(cookie storage indexedDB)

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

随机推荐

  1. 修改NavigationBarItem的字体大小和颜色的使用方法

    //创建一个左边按钮 UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" st ...

  2. 关于ArcGIS的Web 3D GIS问答

    以下问答基于ArcGIS 10.4版本,涉及的软件有 ArcGIS for Server ArcGIS for Desktop ArcGIS Pro 1.3 Esri Drone2Map 1 支持B/ ...

  3. Autodesk正在招聘Civil、Infraworks金牌支持工程师(Premium Support Specialist)

    Civil Infraworks金牌支持工程师,也不知道中文这么翻对不对,反正很牛的,地点优选上海,不过其他地区也没问题啊,感兴趣的,赶紧扔简历过来,我当你内线,帮你内推 :) Autodesk是全球 ...

  4. Centos6_64 rpm打包实践

    安装rpmbuild sudo yum install rpm-build 普通用户的配置 /home/you/rpmbuild/ 假设是要构建rpm的目录 先说说rpmbuild有什么用,给一个例子 ...

  5. iOS之触摸及手势

    触摸事件 iOS中的事件: 在用户使用app过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型:    view的触摸事件处理: 响应者对象: 在iOS中不是任何对象都能处理事件,只有继承了 ...

  6. python之(re)正则表达式上

    python正则表达式知识预备 正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python的语法冲突,因此,Python用" \\\\ "表 ...

  7. 在 CentOS7 之部署 Redis3

    CentOS7 之 Redis3 学习笔记 1 Redis 官网: http://www.redis.io/ 2 Redis 的下载地址: http://download.redis.io/relea ...

  8. 集合2--毕向东java基础教程视频学习笔记

    Day14 08 LinkedList09 LinkedList练习10 ArrayList练习11 ArrayList练习2 12 HashSet13 HashSet存储自定义对象14 HashSe ...

  9. 如何查看Windows服务器运行了多长时间

    前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...

  10. Linux命令学习总结:chage

    命令简介: 该命令用于密码时效管理.它可以修改账号和密码的有效期.对于chage命令的描述如下所示: The chage command changes the number of days betw ...