zccst
- 浏览: 3328252 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具（开发）使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563：
感谢作者分享~请教下，http://www.lisa33xia ...
CSS基础：text-overflow:ellipsis溢出文本 -
u012206458：
$.ajax的error,complete,success方法 -
DEMONU：
谢谢，虽然不能给你赞助，但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes：
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础：text-overflow:ellipsis溢出文本 -
zenmshuo：
用过SpreadJS，也包含数据可视化的图表
推荐几个web中常用js图表插件
作者：zccst
一、LocalStorage 和 sessionStorage
2015-3-27 第二个坑
惊呆的事实：不管是Boolean，还是Number，还是其他类型，一律转为String存储。
localStorage.setItem('aa', false);
localStorage['aa'] === false; //false
localStorage['aa'] === "false";//true
也即是存储在localStorage后，将布尔型数据改成字符串了。
同理：
localStorage.a = 0;
localStorage.a; //"0"
localStorage.a === "0";//true
localStorage.a === 0; //false
Boolean("false"); //true
2015-3-20
存储数据 Window.localStorage.setItem(key,value)
读取数据 Window.localStorage.getItem(key)
删除数据项 Window.localStorage.removeItem(key)
删除所有数据 Window.localStorage.clear()
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本
例如：
localStorage.key ={value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的，下面的写法也不可以：
localStorage.getItem("key").value1="a";
还有Storage，GlobalStorage
在IE8之前版本也可以使用,叫做"userData behavior"
interface Storage {
readonly attribute unsigned long length;
[IndexGetter] DOMString key(in unsigned long index);
[NameGetter] DOMString getItem(in DOMString key);
[NameSetter] void setItem(in DOMString key, in DOMString data);
[NameDeleter] void removeItem(in DOMString key);
void clear();
};
推荐使用getItem(key), setItem(key, data);
需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 .toString 方法被转换成字符串。所以一个普通对象将会被存储为 "[object Object]"，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。
区别：
sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。
例子：自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。
Storage事件：
对Storage对象进行任何修改，都会在文档上触发事件。这个事件的event对象属性有：
domain：域名
key：设置或删除的键名
newValue 新值
oldValue 旧值
EventUtil.addHandler(document, "storage", function(event){
alert(event.domain);
});
更多关于localStorage的信息，还可以参考：
http://zccst.iteye.com/blog/2194344
二、IE下userData
首先 <div style="behavior:url(#default#userData)" id="dataStore"></div>
然后就可以使用setAttribute()方法在上面保存数据了，例如
var o = document.getElmentById("dataStore");
o.setAttribute("name", "Nicholas");
o.setAttribute("book", "Javascript Book");
o.save("BookInfo");
取信息
o.load("BookInfo");
o.getAttribute("name");
o.getAttribute("book");
删除信息
o.removeAttribute("name");
o.save("BookInfo");
三、离线检测
navigator.onLine
EventUtil.addHandler(document, "online", function(event){
alert("Online");
});
EventUtil.addHandler(document, "offline", function(event){
alert("Offline");
});
轮询
四、应用缓存
描述文件 manifest file 列出要下载和缓存的资源。例如：
CACHE MANIFEST
#Comment
file.js
file.css
<html manifest="/offline.manifest">描述文件，这个mime是text/appcache
这个API核心是applicationCache对象，有一个status属性，值是常量，分别是：
0, 无缓存
1, 闲置
2, 检查
3，下载中
4，更新完成
5，废弃
相关事件：
checking
error
noupdate
downloading
progress
updateready 下载完毕
cached
一般依次触发以上事件。但也可以手工干预直接调用applicationCache.update();
如果您觉得本文的内容对您的学习有所帮助，您可以微信：
一、LocalStorage 和 sessionStorage
2015-3-27 第二个坑
惊呆的事实：不管是Boolean，还是Number，还是其他类型，一律转为String存储。
localStorage.setItem('aa', false);
localStorage['aa'] === false; //false
localStorage['aa'] === "false";//true
也即是存储在localStorage后，将布尔型数据改成字符串了。
同理：
localStorage.a = 0;
localStorage.a; //"0"
localStorage.a === "0";//true
localStorage.a === 0; //false
Boolean("false"); //true
2015-3-20
存储数据 Window.localStorage.setItem(key,value)
读取数据 Window.localStorage.getItem(key)
删除数据项 Window.localStorage.removeItem(key)
删除所有数据 Window.localStorage.clear()
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本
例如：
localStorage.key ={value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的，下面的写法也不可以：
localStorage.getItem("key").value1="a";
还有Storage，GlobalStorage
在IE8之前版本也可以使用,叫做"userData behavior"
interface Storage {
readonly attribute unsigned long length;
[IndexGetter] DOMString key(in unsigned long index);
[NameGetter] DOMString getItem(in DOMString key);
[NameSetter] void setItem(in DOMString key, in DOMString data);
[NameDeleter] void removeItem(in DOMString key);
void clear();
};
推荐使用getItem(key), setItem(key, data);
需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 .toString 方法被转换成字符串。所以一个普通对象将会被存储为 "[object Object]"，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。
区别：
sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。
例子：自动保存一个文本域中的内容，如果浏览器被意外刷新，则恢复该文本域中的内容，所以不会丢失任何输入的数据。
// 获取到我们要循环保存的文本域
var field = document.getElementById("field");
// 查看是否有一个自动保存的值
// (只在浏览器被意外刷新时)
if ( sessionStorage.getItem("autosave")) {
// 恢复文本域中的内容
field.value = sessionStorage.getItem("autosave");
}
// 每隔一秒检查文本域中的内容
setInterval(function(){
// 并将文本域的值保存到session storage对象中
sessionStorage.setItem("autosave", field.value);
}, 1000);
Storage事件：
对Storage对象进行任何修改，都会在文档上触发事件。这个事件的event对象属性有：
domain：域名
key：设置或删除的键名
newValue 新值
oldValue 旧值
EventUtil.addHandler(document, "storage", function(event){
alert(event.domain);
});
更多关于localStorage的信息，还可以参考：
http://zccst.iteye.com/blog/2194344
二、IE下userData
首先 <div style="behavior:url(#default#userData)" id="dataStore"></div>
然后就可以使用setAttribute()方法在上面保存数据了，例如
var o = document.getElmentById("dataStore");
o.setAttribute("name", "Nicholas");
o.setAttribute("book", "Javascript Book");
o.save("BookInfo");
取信息
o.load("BookInfo");
o.getAttribute("name");
o.getAttribute("book");
删除信息
o.removeAttribute("name");
o.save("BookInfo");
三、离线检测
navigator.onLine
EventUtil.addHandler(document, "online", function(event){
alert("Online");
});
EventUtil.addHandler(document, "offline", function(event){
alert("Offline");
});
轮询
四、应用缓存
描述文件 manifest file 列出要下载和缓存的资源。例如：
CACHE MANIFEST
#Comment
file.js
file.css
<html manifest="/offline.manifest">描述文件，这个mime是text/appcache
这个API核心是applicationCache对象，有一个status属性，值是常量，分别是：
0, 无缓存
1, 闲置
2, 检查
3，下载中
4，更新完成
5，废弃
相关事件：
checking
error
noupdate
downloading
progress
updateready 下载完毕
cached
一般依次触发以上事件。但也可以手工干预直接调用applicationCache.update();
如果您觉得本文的内容对您的学习有所帮助，您可以微信：
分享到：
发表评论
-
面试题201412——client DOM操作和CSS操作
2014-12-17 23:28 1673作者：zccst 一、DOM操作文档树 其实对于DOM系列 ... -
面试题201412——client 脚本化HTTP
2014-12-17 00:22 1001作者：zccst Ajax的缺 ... -
面试题201412——core 小算法
2014-12-17 00:22 1102作者：zccst 给数组添加一个去重方法 计算字符串的字 ... -
面试题201412——client 事件
2014-12-17 00:23 1382作者：zccst 如何在i ... -
面试题201412——CSS
2014-12-17 00:24 791作者：zccst CSS的优先级？内联和important哪 ... -
面试题201412——HTML
2014-12-16 21:51 640作者：zccst 严格模式与混杂模式的区分？如何触发这两种模 ... -
面试题201412——杂项待整理
2014-12-16 20:28 639zccst js 1，跨域 2，eval 3 ... -
面试题201412——core this作用域
2014-12-16 17:43 1230作者：zccst 二、setTimeout与while的执 ... -
面试题201412——core 变量作用域
2014-12-16 16:32 1062作者：zccst 1，var a = b = 5; (f ... -
10亿个字符串的排序问题
2014-12-15 15:33 8zccst转载 一、问题描述 有一个大文件，里面有十亿个字符串 ... -
10亿个字符串的排序问题
2014-12-15 15:33 1544zccst转载 一、问题描述 有一个大文件，里面有十亿个字符串 ... -
删除数组中的某一个元素
2014-08-01 15:36 0作者：zccst 首先定义一个数组如果 var a = ... -
计算字符串中每个字符出现的次数
2014-08-04 18:30 2189思想原理：把字符串分割为数组，粒度为每一个字符。循环该数组，用 ... -
$("div")和getElementsByTagName("div")区别
2014-08-01 15:22 926作者：zccst <body> < ... -
程序设计模型——向导模型（Wizard model）
2012-08-28 22:39 1863程序设计模型——向导模型（Wizard model） 作者：z ... -
B+树
2011-05-12 22:08 1665一棵m阶的B树满足下列 ... -
堆排序与快速排序的区别及js实现
2011-04-19 23:32 15901，快速排序 核心要点：1，选基础参考点；2，递归 fu ... -
几个算法或逻辑题
2011-04-15 12:59 1253作者：zccst 2014-6-14 PHP 在数值中加入千 ...
相关推荐
- **工作原理**: HTML5 提供了两种本地存储技术——`localStorage` 和 `sessionStorage`。 - `localStorage`: 用于长期存储数据，数据不会随浏览器关闭而消失。 - `sessionStorage`: 存储临时数据，数据在浏览器...
### JavaScript 面试知识点详解 #### 一、HTML 和 CSS **1、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么?** - **Chrome**: 使用 Blink 渲染引擎。 - **Firefox**: 使用 Gecko 渲染引擎。 - **...
### JAVA面试题集锦知识点概览 #### 一、Java基础知识 1. **Java基本数据类型**：Java中有八种基本数据类型，分别是`byte`、`short`、`int`、`long`、`float`、`double`、`char`和`boolean`。`String`不是基本数据...
### 前端面试知识点详解 #### 一、HTML与CSS基础 **1. 浏览器兼容性及内核** - **问题**: 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么? - **答案**: - **Chrome**: 使用Blink引擎。 - **Firefox*...
### WEB阶段面试题汇总（精华版）知识点梳理 #### 一、Servlet调用过程与数据库连接池 **1.1.1. Servlet调用过程** - **加载**: 当客户端首次请求一个Servlet时，Web容器（如Tomcat）会加载该Servlet类。 - **...
因此，HTML5引入了新的本地存储机制——WebStorage，它包括了`sessionStorage`和`localStorage`两种形式。 **sessionStorage**：主要用于临时存储同一会话中的数据。当用户关闭浏览器窗口或标签页后，存储的数据会...
1. **WEB前端研发类笔试题**：包括CSS3的新特性，JavaScript编程实践，HTML/CSS实现特定布局，浏览器缓存与本地存储的功能与区别，对称数算法实现等。这些问题考察应聘者的前端技术掌握程度，对于应聘WEB前端研发类...