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还定义了两个事件.这两 ...
随机推荐
- $(function) ready onload 等区别
新手接触javascript.jquery的时候不可避免的要接触题目所标识的相关内容,反复看过几次一到用的时候总是不踏实,写文以记之. 符号“$”是jquery对象(个人这样理解,拥有函数的用法).接 ...
- Dev TreeList 总结
1.表格的要求:如果要求有父子节点关系,则必须有ID和ParentID字段,并且父节点ParentID字段必须指向ID字段. 2.Access表格在穿入DATATABLE的时候,要想表现出父子节点关系 ...
- SharePoint 2013 对二进制大型对象(BLOB)进行爬网
本文是参考MSDN文档做的示例,SharePoint 2013搜索二进制对象(BLOB),通过外部内容类型的方式将外部数据与SharePoint相关联,修改BCD模型,使SharePoint能够爬网外 ...
- 【转】swift实现ios类似微信输入框跟随键盘弹出的效果
swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...
- iOS开发-UI 从入门到精通(四)
一.UITextField 1.UITextField是什么? (1)UITextField(输入框):是控制文本输入和显示的控件.在App中UITextField出现频率也比较高: (2)iOS系统 ...
- Golang(笔记) 面向对象
package main import ( "fmt" ) //对象定义 type Rect struct{ x,y float64 width ,height float64 } ...
- 【原】iOS动态性(四):一行代码实现iOS序列化与反序列化(runtime)
为取得更好的排版效果,本文同样发布在简书上,强烈建议跳转到[1]http://www.jianshu.com/p/fed1dcb1ac9f 一.变量声明 为便于下文讨论,提前创建父类Biology以及 ...
- IOS 杂笔-16 (-(void)scrollViewDidEndScrollingAnimation:方法使用注意)
今天在写项目的时候,遇到了一件令人抓狂的事情. 正如标题所示,被这个方法弄的团团转. -(void)scrollViewDidEndScrollingAnimation:是协议里的方法. 意味当动画结 ...
- yii2批量添加的问题
作者:白狼 出处:http://www.manks.top/yii2_batch_insert.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否 ...
- FastDFS+Nginx(单点部署)事例
FastDFS是由淘宝的余庆先生所开发,是一个轻量级.高性能的开源分布式文件系统,用纯C语言开发,包括文件存储.文件同步.文件访问(上传.下载).存取负载均衡.在线扩容.相同内容只存储一份等功能,适合 ...