跟KingDZ学HTML5之八 HTML5之Web Save
好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵
弄不好,开个专题,也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。
大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K ? 真的啊,呵呵,要是工资底薪还可以。。哈哈
这节课,俺说的这个和COOKIES 差不多。好了,废话不多说,我们讲课。
HTML5 提供了两种在客户端存储数据的新方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
localStorage
目前 chrome,firefox,opera,safari, IE8 都支持此属性。还有一个很重要的一点,就是
各个浏览器分配给每个 localStorage 空间至少为 5M(具体数值请看稍后讨论),对于想开始使用 HTML5 的人们来说,这个是个不错的开始。哈哈,5M >>>> 4k 啊
我们先来一个测试,验证浏览器是否支持 localStorage
<! doctype html> <html> <head><script type="text/javascript">function check() {if (window.localStorage) {alert("浏览器支持 localStorage");}else {alert("浏览器不支持 localStorage");}}</script> </head> <body><canvas id="mycanvas" width="200" height="200">不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell </canvas><input type="button" value="验证" οnclick="check();" /><body> </html>
效果图---谷歌测试结果。
localStorage 使用方式非常简单
有 setItem, getItem, removeItem,key, clear 5个方法,和 length 一个属性。
好了,下面我们开始尝试一下吧。
localStorage 中都是以 key/value 的形式来存储数据的,存储的数据类型都是字符串。
如果需要其他类型,需要自行转换。我们可以使用 setItem 方法来存储数据。
也就是 localStorage.setItem(key,value);
<script type="text/javascript">function check() {if (window.localStorage) {try {localStorage.setItem("name", "祖国你好!");}catch (e) {alert(e);}}else {alert("浏览器不支持 localStorage");}alert(localStorage.getItem("name"));}</script>
上面的这个例子就包括了我们常见的两种用法。
下面我们在介绍几个不同的用法,但是以上面的那两个为主
localStorage.key = "value"; ---------------------设置key为"value"
localStorage["key"] = "value"; ------------------设置key为"value"
localStorage.setItem("key","value");----------------设置key为"value"
var value1 = localStorage["key"];-------------------获取key的值
var value2 = localStorage.key;-------------------------获取key的值
var value3 = localStorage.getItem("key"); ------------获取b的值
上面的方法是等效的。不过建议大家用 setItem 和 getItem
localStorage.removeItem("key");--------------------清除key的值
如果希望一次性清除所有的键值对,可以使用clear();
localStorage.clear();
当然 localStorage有一个 key() 方法,我只在这里提示一下,就是,不知道 key 是什么了,只能用 循环 得到 也就是 localStorage.key(i) ------------其中 i 是下标。
好了下面是一个简单的页面 访问计数器。
<head><script type="text/javascript">function check() {if (window.localStorage) {try {if (localStorage.pagecount) {localStorage.pagecount = Number(localStorage.pagecount) + 1;}else {localStorage.pagecount = 1;}document.write("第" + localStorage.pagecount + "次访问");}catch (e) {alert(e);}}else {alert("浏览器不支持 localStorage");}}</script> </head> <body οnlοad="check();"><canvas id="mycanvas" width="200" height="200">不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell </canvas> <body>
好了 完成了,大家测试一下吧,当然有各种各样的写法的。
下面我们说一下 sessionStorage 的简单用法
哈哈,其实废话了 ,他们的用法相同,区别在文章开始,就说了,
再写一个计数器 sessionStorage 版本的
<script type="text/javascript">function check() {if (!sessionStorage.pageCounter)sessionStorage.setItem('pageCounter', 0);sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter) + 1);document.write(sessionStorage.pageCounter);}</script>
好了,大家试一下啊,关闭浏览器,打开看真相。
呵呵,前者,木有时间限制,后者浏览器关闭,就结束了。所以记得及时清空前者啊。今天得课程结束喽。
转载于:https://www.cnblogs.com/zhaolizhe/p/6923525.html
跟KingDZ学HTML5之八 HTML5之Web Save相关推荐
- HTML5 高级系列:web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
- HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
- HTML5 高级系列:web Storage
HTML5 高级系列:web Storage html5 浏览数:172 2017-10-23 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessio ...
- 或许是因为本科不是学cs的HTML5原因
或许是因为本科不是学cs的HTML5原因,也可能是自己不够聪明的原因,我发现自己真的不能享受那种编程的乐趣.我身边的同学中,大概有一半人,从他们的眼神中,从他们的表情中,就能感觉出来他们是真心喜欢编程 ...
- HTML5 飞鸽传书web service都发布到交互服务器
因此我们需要把用到的HTML5 飞鸽传书 web service都发布到交互服务器,它会登记所有服务.此时手机终端的访问方式几乎和web/application server中(2)的方式一样,先授权 ...
- html5 app list,让web app更快的HTML5最佳实践
简介 本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅. Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合 ...
- Waud.js – 使用HTML5降级处理的Web音频库
Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...
- 基于HTML5+CSS3的IGX Web SCADA在楼宇自控系统的应用
基于HTML5+CSS3的IGX Web SCADA在楼宇自控系统的应用 楼宇自动化控制采用的是计算机集散控制,所谓计算机集散控制就是分散控制集中管理.它的分散控制器通常采用直接数字控制器( DDC) ...
- 跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
最新文章
- python常用命令大全-Python pip 常用命令汇总
- 多进程单线程模型与单进程多线程模型之争
- 王帅:深入PHP内核(二)——SAPI探究(精辟)
- 浅析三种特殊进程:孤儿进程,僵尸进程和守护进程.
- 关于孵化器类型的创业公司-面试注意事项
- 第三次学JAVA再学不好就吃翔(part100)--文件名称过滤器
- 【渝粤题库】国家开放大学2021春1356高级英语听说(2)题目
- pythonwhile爬虫教程_Python 爬虫从入门到进阶之路(十一)
- 浏览器加载js的阻塞与非阻塞
- with 语句的妙用
- 通过FD耗尽实验谈谈使用HttpClient的正确姿势 1
- AWS AI网络研讨会 webinar - Case 分享
- qpython3下载不了_qpython3手机版
- 微前端 Micro-Frontnds - Single-SPA Application API
- 为云而生,腾讯云服务器操作系统TencentOS内核正式开源
- VSCode: Acquiring CodeLLDB platform package 速度慢
- HTML5 canvas基础使用
- 莎士比亚数据集_如何使用深度学习写莎士比亚
- mysql limit sql注入_LIMIT子句中的盲 SQL注入漏洞利用
- 打包AS中的APK文件
热门文章
- win7 中出现“为了配置TCP/IP,必须安装并启动网络适配卡“问题的解决办法
- IDEA Debug 无法进入断点的解决方法
- 如何使用pass语句?
- 错误-trustAnchors参数必须为非空
- 使用JavaScript(jQuery或Vanilla)选中/取消选中复选框?
- 如何在Node.js中打印堆栈跟踪?
- win11无法下载steam怎么办 Windows11无法下载steam的解决教程
- clion中自定义消息msg消息时定义的msg文件有类型提示
- 读写文件RandomAccessFile
- JAVA:泛型通配符T,E,K,V区别,T以及Class,Class的区别