前端存储-cookie-sessionStorage-loacalStorage
来源:互联网 发布:小语网络加速器注册 编辑:程序博客网 时间:2024/06/06 05:23
0. cookie
h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。
主要应用:购物车、客户登录
对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。
1.本地存储localstorage
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
大小:
每个域名5M
支持情况:
注意:IE9 localStorage不支持本地文件,需要将项目署到服务器,才可以支持!
检测方法:
1
2
3
4
5
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
常用的API:
getItem //取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
存储的内容:
数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)
3.web SQL
关系数据库,通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
支持情况:
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心方法:
①openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
②transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
③executeSql:这个方法用于执行实际的 SQL 查询。
打开数据库:
1
2
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为:数据库名称、版本号、描述文本、数据库大小、创建回调
执行查询操作:
1
2
3
4
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
插入数据:
1
2
3
4
5
6
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
读取数据:
1
2
3
4
5
6
7
8
9
10
11
12
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<
p
>查询记录条数: " + len + "</
p
>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});
由这些操作可以看出,基本上都是用SQL语句进行数据库的相关操作,如果你会MySQL的话,这个应该比较容易用。
转载自:http://www.cnblogs.com/LuckyWinty/p/5699117.html
阅读全文
0 0
- 前端存储-cookie-sessionStorage-loacalStorage
- cookie,sessionStorage,localStorage本地存储
- 本地存储Cookie、localStorage、sessionStorage
- 前端的存储方式有:localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等
- 前端扫雷之cookie/localStorage/sessionStorage
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- 浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase
- 浏览器端数据存储之Cookie、localStorage、sessionStorage
- HTML5——存储(cookie、localStorage、sessionStorage)
- sessionStorage存储
- sessionStorage,localStorage,cookie
- session, cookie, localStorage, sessionStorage
- sessionstorage,localstorage和cookie
- LocalStorage,SessionStorage,Cookie
- Cookie,sessionStorage,localStorage
- 知识点:cookie、localStorage、sessionStorage
- cookie,session,localstorage,sessionStorage
- Android自定义开机和关机动画
- 第5章 索引与算法,第6章 锁
- Git 分布式版本控制
- JavaScript对JSON的解析
- scala 时间戳比较大小
- 前端存储-cookie-sessionStorage-loacalStorage
- 建立动态二维数组
- 把一个数组排序为最小的值
- CSS清除浮动_清除float浮动
- php preg_match函数和php preg_match_al函数l实例,方法,例子
- Java多线程总结之---概念、创建/启动、状态变换
- 最近完成的AndroidStudio项目实现思路及应用技术
- IO多路复用
- Bean生成过程与BeanFactory ApplicationContext生命周期