php cookie使用实例h5,html5实现数据存储实例代码
html5数据存储
就目前为止实现客户端存储的方式是多种多样,最简单而且兼容性最佳的方案是cookies,但是作为真正的客户端存储,cookies还存在一些不足。大小cookie的大小被限制在4KB。
带宽cookie是随http事务一起发送的,因此会浪费一部分发送cookies时使用的带宽。
复杂cookies操作起来比较麻烦:所有信息要被拼到一个长字符串里面。
联系对cookiess来说,在相同的站点与多事务处理保持联系不是很容易。
在这种情况下,在HTML5中重新提供了一种在客户端本地保存数据的功能“web storage”
功能。
它包含两种存储类型
SessionStorage和localStorage二者都支持在同域下存储5MB数据
不同点在于
SessionStorage的数据为临时保存(当用户关闭浏览器---数据将不存在)
localStorage为永久保存,用户关闭浏览器---数据仍然存在(除非用户手动清空)
※下面我们可以用例子来证明一下※
首先创建两个页面
页面代码如下:Index.html->
打开测试页面看一下
window.οnlοad=function(){
sessionStorage.setItem("date","今天是2017年2月3号,本少心情不错!")
localStorage.setItem("localDate","我想讲今天这个种心情永久的保存下来,留下最美好的见证!")
}
Test.html->
window.οnlοad=function(){
alert("临时会话:"+sessionStorage.getItem("date"));
alert("永久会话:"+localStorage.getItem("localDate"));
}
先打开首页看看->单击链接
可以看到这几个效果
好吧现在我们关闭浏览器来看看效果
首先把链接复制下来
我们现在只打开这个text这个页面
现在可以看到这个临时会话在我们关闭浏览的时候就消失了
但是通过localstorage保存的数据还存在
所以这里的的数据就根据你使用的情况不同来使用不同的存储啦
一般比较的大的图像数据比如固定的会用bese64存到本地会话中,但是值得注意的是这里存储也是有5MB的限制,而且通过键值对的形式存储,也不利于程序的扩展,所以这里还提供HTML另一种存储机制“web sql”。
在HTML5中内置了一个可以通过SQL语言来访问的数据库,看名字就知道这是数据库本地存储功能,这是一个真正的数据库,可以查询和添加数据,在HTML5中,大大丰富了客户端本地可以存储的内容。
目前,像这种不需要存储在服务器上的,被称为“SQLLLIte”的文件型SQL数据已经得到了很广泛的应用,所以HTML5中也采用了这种数据库来作为本地数据库。
我们还是直接用例子来说明---(因为学过数据库的大致明白这就是本地的数据,基本和我们平常安装的数据库是一样的。)
新建一个
WebSQL.html
window.οnlοad=function(){
//打开和创建数据库
var db;
//首先判断浏览器是否支持本地数据库
if(window.openDatabase){
//初次打开一个数据库,就会自动创建数据库。任何时间,在该“域”上只能拥有指定数据库的一个版本,因此如果创建了
//版本1.0,那么应用程序在没有特定的改变数据库的版本时,将无法打开1.1。
//打开和创建数据库,第一参数数据库名,第二个参数版本号,第三个参数为数据库的描述,第四个参数为数据库的大小
//该方法返回创建后的数据库访问对象,如果该数据库不存在,则创建该数据库。
db=openDatabase("myWBSQL",'1.0','这个是描述可以写可以不写',2*1024*1024);
//使用事务来执行处理(一般的学过数据库知道这种处理方式的优点)
db.transaction(function(tx){
//执行SQL语句---这里创建一个数据库
tx.executeSql('create table if not exists st(id,age,name)');
//添加一条SQL语句
//第一个参数为需要执行的SQL语句,第二个参数为SQL语句中用到参数数组
//后面两个参数为成功和失败的回调函数
tx.executeSql("insert into st(id,age,name)values(?,?,?)",["1","天下第几","毛馨婕"],function(tx,results){
//成功之后的回调函数
alert("插入语句成功");
console.info(results);
},function(tx,errmsg){
alert("插入语句失败!");
console.info(errmsg);
})
});
}else{
alert("您的浏览器不支持本地数据!")
}
}
我们打开搜狗浏览器查看一下->这里在控制台中查看
这里我们十分清晰的可以看到插入到本地数据库的语句是和我们写的一至的
那么我们再新建一个页面来看看我们关闭浏览器后查看本地数据中的数据selectSQL.html
{
var db;
if(window.openDatabase)
{
db = openDatabase("myWBSQL", '1.0', '这个是描述可以写可以不写', 2 * 1024* 1024);
db.transaction(function(tx)
{
tx.executeSql("select * from st where name=?", ["毛馨婕"],function(tx, results)
{
console.info(results);
alert(results['rows'][0]['name']+"---"+results['rows'][0]['age']);
}, function(tx, errmsg)
{
console.info(errmsg);
})
});
} else {
alert("您的浏览器不支持本地数据!")
}
}
打开页面
控制台中可以看到
当然啦这个都是很简单的,但是正是慢慢的积累才能一步步成长。所以和大家一起学习啦
php cookie使用实例h5,html5实现数据存储实例代码相关推荐
- 白鹭本地数据存储操作代码实例
白鹭引擎 版本:5.2.8 描述:白鹭本地数据存储操作代码实例 本地数据的增删改查函数 /*** 数据存储函数*/private save_key(key_name:string,key_value: ...
- HTML5的数据存储和数据处理的功能有,浅析 HTML5 数据存储的方法及应用
原标题:浅析 HTML5 数据存储的方法及应用 1 HTML5 本地存储简介 中新增的功能之一是本地,使用本地数据 库可以在客户端本地建立一个数据库,该数据库以前是必须要 保存在服务器端数据库中的内容 ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- html中评论存储方法,html5基于数据存储的评论留言板demo
本篇结合存储保存数据简要介绍数据保存.读取.清除的一个小demo. 简单的留言板 简单的评论/留言板 js: function saveStorage(id) { var data = documen ...
- 数据分析之爬虫实例-获取天气AQI数据-附python代码
数据分析与数据挖掘的步骤流程: 1.明确目标.首先要熟悉业务背景,了解业务背景后,才能明确目标.如去分析电商业务流量与转化率的关系,广告业务如何确定单次点击竞价增加点击率和有效访问率,产品业务根据PV ...
- html实现数据存储,HTML5数据存储
相信你已经对HTML5的数据存储有过了解或者是深入的了解,但是哥还是要在此略提一下HTML4与HTML5的数据存储. HTML4的数据存储主要有cookie存储和session存储,这两种存储都有时间 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
- 酒浓码浓 - HTML5微数据/itemscope/itemtype/itemprop
HTML5微数据/itemscope/itemtype/itemprop 定义: 微数据是有特定属性名称的词汇表中特定的元素属性的数据,它是一种方便机器识别的数据 大白话理解: 一个一堆乱码的网页,你 ...
- html中视频代码字段,Html5通过数据流方式播放视频的实现
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC.Android和IOS环境. H5页面可以通过 标签来播放视频.一般的方式如下: your browser does not ...
最新文章
- pyinstaller 打包成exe
- Faster-RCNN 自己的数据训练
- C语言 复制文件内容粘贴到另一个文件中
- mysql5.7二进制包安装
- 第一篇 - 手把手教你理清EOS各种开发环境搭建来龙去脉
- MySQL如何添加主键(PRIMARY KEY)
- [即将举行的网络研讨会]对Kubernetes进行故障排除:您需要具备的7个关键组件
- C# MVC的博客开发(二)登录
- 工程用计算机是什么样子的,【2人回答】学软件工程的应该买什么样的处理器电脑?-3D溜溜网...
- 笨办法学 Python · 续 练习 0:起步
- tablayout 增加数字小标_Android中TabLayout添加小红点的示例代码
- OSPF的LSA类型 ——连载二网络LSA
- MPlyaer播放高清视频的说明(CoreAVC、提高速度和清晰度等问题)
- Db4o数据库:细说查询
- 一个驱动级别的 键盘鼠标模拟工具
- xp计算机连接不上网络打印机驱动,XP系统下如何设置连接网络打印机?
- 希腊字母与英文读音中文读音对照表
- 211院校实习生三跨Java面经(头条、拼多多、华为、vivo)
- j3455文件服务器,UNRAID下解决华擎 J3455-ITX IOMMU 分组(4口网卡顺利分开直通 )...
- 《ROS机器人开发实践》使用RoboWare创建talker和listener程序
热门文章
- GPB:菊粉改善糖脂代谢紊乱作用的机制(作者解读)
- 中国肠道大会 | 3天日程,220+报告,肠道新知一次听够!
- R语言ggplot2可视化分面图(facet_wrap)、使用size参数自定义设置分面图标签栏(灰色标签栏)中的标签文本的字体大小
- R语言机器学习Caret包(Caret包是分类和回归训练的简称)、数据划分、数据预处理、模型构建、模型调优、模型评估、多模型对比、模型预测推理
- pandas使用fillna函数并设置fffill参数使用列中的前序值填充缺失值(replace missing values with preceding values in column in d
- R语言使用str_replace函数和str_replace_all函数替换字符串中匹配到的模式:str_replace函数替换第一个匹配到的字符串、str_replace_all函数替换所有匹配到的
- R语言ggplot2可视化在箱图中为箱图添加均值的标签及对应数值实战
- 影像组学视频学习笔记(41)-如何使用软件提取组学特征、Li‘s have a solution and plan.
- LinearAlgebra_2
- Comparison of long-read sequencing technologies in the hybrid assembly of complex bacterial genomes