【读书笔记】HTML5 Web存储

function setCookie(name, value, expiredays) {
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + date.toGMTString());
}
setCookie('username', 'Darren', 30);
function getCookie(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "="); //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1
if (start != -1) {
start = start + name.length + 1; //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
var end = document.cookie.indexOf(";", start);// indexOf()第二个参数表示指定的开始索引的位置
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(start, end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础
}
}
return "";
}
也有Jquery.cookie.js可以用
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'cnblogs.com'});//设置
var cc = $.cookie('the_cookie');//获取
$.cookie('the_cookie', null);//删除
Web Storage
interface Storage{
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key,in any data);
deleter void removeItem(in DOMString key);
void clear();
}
优缺点
window.sessionStorage.setItem('mykey', 'niqiu');
window.sessionStorage.nikey = 'stone';
alert(window.sessionStorage.getItem('mykey'));
alert(window.sessionStorage.nikey);
将一段Json存入localstorage:
var data = new Object();
data.name = "stoneniqiu";
data.age = "26";
var str = JSON.stringify(data);
localStorage.setItem(data.name, str); function getstone() {
var raw = localStorage.getItem("stoneniqiu");
var data = JSON.parse(raw);
alert(data.name + data.age);
}
getstone();
用LS存储用户的操作记录,个性化的代码片段。对于性能和使用范围可以看看这篇文章:让我们再谈谈浏览器资源加载优化
Web SQL
Web SQL Database 允许应用通过一个异步JavaScript接口访问SQLLite 数据库,但IE,Firefox并没有实现它,而且WHATWG也停止对Web Sql Database的开发。由于标准认定直接执行SQL语句不可取,Web Sql database 已经被索引数据库(Indexed Database)所取代。
浏览器 |
说明
|
IE
|
不支持
|
FireFox
|
不支持
|
Opera
|
10.5及以上支持
|
Chrome
|
3.0及以上支持
|
Safari
|
3.2及以上支持。 |
Database openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsigned long estimatedSize,in optional DatabaseCallback creationCallback)
参数名称不言而喻 脚本用法:
var db=openDatabase("myDb","0.1","A list of to do items",20000)
这样就创建了一个数据库。
2.transaction:允许用户根据情况控制事务提交或回滚。完整定义:
transaction.executeSql(sqlquery,[],dataHandler,errorHandler):
sqlquery 为要执行的sql语句,[]这个数组表示sql语句中使用的参数数组。所有参数先用?号代替。然后依次将这些参数放在这个数组中。
脚本用法:
db.transaction(function(tx){})
实例:
transaction.executeSql("Update people set age-? where name=?;",[age,name]);
function dataHandler(transaction,errmsg){}
function errorHandler(transaction,errmsg){}
3.executeSql:用于执行真实的SQL查询。
实例:
function initdb() {
var name = ['C#', "C++", "C", "JavaScript", "Java", "PhP"];
db.transaction(function(tx) {
tx.executeSql('Create table if not exists mytable(id integer primary key autoincrement,name)');
for (var i = 0; i < name.length; i++) {
tx.executeSql('insert into mytable(name) values(?)', [name[i]]);
}
});
} initdb();
一张表包含了用 "AUTOINCREMENT" 修饰的列时, sqlite 将自动创建表 "SQLITE_SEQUENCE"。如果想清空记录,让编号归0,直接处理sqlite_sequence就可以了。
db.transaction(function(tx) {
tx.executeSql('create table if not exists t1(id unique,log)');
tx.executeSql('insert into t1(id,log) values(1,"created a db")');
tx.executeSql('insert into t1(id,log) values(1,"a good day")');
tx.executeSql('insert into t1(id,log) values(1,"hello")');
}); //读取:
db.transaction(function(tx) {
tx.executeSql('select * from t1', [], function(tx, results) {
var len = results.rows.length, i;
var msg = "<p>共有" + len + "条记录</p>";
document.getElementById("res").innerHTML = msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#res').innerHTML += msg;
}
},null);
});
IndexedDB
IndexedDB很像Nosql。能够存储可观的结构化数据,一个单独的数据库项目的大小没有限制。然而可能会限制每个 IndexedDB 数据库的大小。这个限制(以及用户界面对它进行断言的方式)在各个浏览器上也可能有所不同。比如Firefox4中一个站点超过50M,Firefox会向用户请求权限。在移动端是5M.
使用异步 API 方法调用完后会立即返回,而不会阻塞调用线程。
文档中的示例:
var request = indexedDB.open("library");
request.onupgradeneeded = function () {
// The database did not previously exist, so create object stores and indexes.
var db = request.result;
var store = db.createObjectStore("books", { keyPath: "isbn" });
var titleIndex = store.createIndex("by_title", "title", { unique: true });
var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data.
store.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 });
store.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 });
store.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 });
}; request.onsuccess = function () {
db = request.result;
};
更详细的操作我这里也不赘述了,功能比较强大,支持group,filter等大家可以去看下面两篇文章。
IndexedDatabase API http://www.w3.org/TR/IndexedDB/

【读书笔记】HTML5 Web存储的更多相关文章
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- HTML5 web 存储
简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- 面试之HTML5 Web存储
前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- 读书笔记--大规模web服务开发技术
总评 这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接地气. 书的内容 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 web存储
既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...
随机推荐
- 我利用网上代码开发的JQuery图片插件
我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...
- workflow createPath
针对不同的流程,createpath不同,但是创建审批链,和创建表都有 1.GetUserInfoByListColumn 控件已创建的.先Rebuild,属性需要注意 2.CreateListIte ...
- c# datagridview 中DataSource的使用总结
由于当前项目的窗体更新使用的是订阅事件的方式.其中有个datagridview 动态显示统计数据的列表框.本来想用textbox显示,但不规则,看起来也不美观,改由dgv显示. 我没打算用改dgv表的 ...
- vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构
今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...
- Accordion - 手风琴
//手风琴效果 <div style="overflow:hidden;height:400px;width:948px;"> <div class=" ...
- 浅谈城市规划在移动GIS方面的应用发展
1.概述 城市建设进程加快,城市规划管理工作日趋繁重,各种来源的数据产生各种层出不穷的问题,严重影响城市规划时的准确性,为此全面合理的掌握好各方面的城市规划资料才能做出更加科学的决策.移动端的兴起为规 ...
- Oracle 服务手动启动关闭
在windows7中安装完Oracle11g之后会出现一下七种服务:可通过运行->services.msc查看. 其中各个服务名称中的ORCL或orcl为SID即System IDentifie ...
- TSP旅行商问题的Hopfield求解过程
连续型Hopfield在matlab中没有直接的工具箱,所以我们们根据Hopfield给出的连续行算法自行编写程序.本文中,以求解旅行商 问题来建立Hopfield网络,并得到解,但是该解不一定是 ...
- nil、Nil、NULL和NSNull的理解
http://blog.sina.com.cn/s/blog_4930f8e60101h71b.html 其实早就想研究一下nil.Nil.NULL和NSNull之间的区别,只是工作上除了nil,其它 ...
- project.VERSION_NAME定义
android { compileSdkVersion Integer.parseInt(project.ANDROID_BUILD_SDK_VERSION) buildToolsVersion pr ...