JavaScript的客户端存储
一、前言:
客户端存储实际上就是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的客户端存储的更多相关文章
- 《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 离线检 ...
- 《JavaScript》web客户端存储
Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...
- JavaScript权威指南--客户端存储
客户端存储web应用允许使用浏览器提供的API实现将数据存储在用户电脑上. 客户端存储遵循“同源策略”,因此不同站点的页面是无法读取对于存储的数据.而同一站点的不同的页面之间是可以互相共享存储数据的. ...
- JavaScript获取客户端计算机硬件及系统等信息的方法
JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...
- js023-离线应用与客户端存储
js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...
- Web - 客户端存储的几种方式
客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...
- HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- HTML5 客户端存储数据的两种方式
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...
- 离线应用与客户端存储(cookie storage indexedDB)
离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...
随机推荐
- 修改NavigationBarItem的字体大小和颜色的使用方法
//创建一个左边按钮 UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" st ...
- 关于ArcGIS的Web 3D GIS问答
以下问答基于ArcGIS 10.4版本,涉及的软件有 ArcGIS for Server ArcGIS for Desktop ArcGIS Pro 1.3 Esri Drone2Map 1 支持B/ ...
- Autodesk正在招聘Civil、Infraworks金牌支持工程师(Premium Support Specialist)
Civil Infraworks金牌支持工程师,也不知道中文这么翻对不对,反正很牛的,地点优选上海,不过其他地区也没问题啊,感兴趣的,赶紧扔简历过来,我当你内线,帮你内推 :) Autodesk是全球 ...
- Centos6_64 rpm打包实践
安装rpmbuild sudo yum install rpm-build 普通用户的配置 /home/you/rpmbuild/ 假设是要构建rpm的目录 先说说rpmbuild有什么用,给一个例子 ...
- iOS之触摸及手势
触摸事件 iOS中的事件: 在用户使用app过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型: view的触摸事件处理: 响应者对象: 在iOS中不是任何对象都能处理事件,只有继承了 ...
- python之(re)正则表达式上
python正则表达式知识预备 正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python的语法冲突,因此,Python用" \\\\ "表 ...
- 在 CentOS7 之部署 Redis3
CentOS7 之 Redis3 学习笔记 1 Redis 官网: http://www.redis.io/ 2 Redis 的下载地址: http://download.redis.io/relea ...
- 集合2--毕向东java基础教程视频学习笔记
Day14 08 LinkedList09 LinkedList练习10 ArrayList练习11 ArrayList练习2 12 HashSet13 HashSet存储自定义对象14 HashSe ...
- 如何查看Windows服务器运行了多长时间
前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...
- Linux命令学习总结:chage
命令简介: 该命令用于密码时效管理.它可以修改账号和密码的有效期.对于chage命令的描述如下所示: The chage command changes the number of days betw ...