博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跟KingDZ学HTML5之八 HTML5之Web Save
阅读量:6578 次
发布时间:2019-06-24

本文共 1910 字,大约阅读时间需要 6 分钟。

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些HTML5的应用了,Canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵

弄不好,开个专题,也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。

大家都应该知道 Cookies 这个东东哦,但是太郁闷了,他只有 4K  ?  真的啊,呵呵,要是工资底薪还可以。。哈哈

这节课,俺说的这个和COOKIES 差不多。好了,废话不多说,我们讲课。

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

localStorage 

目前 chrome,firefox,opera,safari, IE8 都支持此属性。还有一个很重要的一点,就是

各个浏览器分配给每个 localStorage 空间至少为 5M(具体数值请看稍后讨论),对于想开始使用 HTML5 的人们来说,这个是个不错的开始。哈哈,5M >>>> 4k 啊

我们先来一个测试,验证浏览器是否支持 localStorage

不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell

效果图---谷歌测试结果。

localStorage 使用方式非常简单

有 setItem, getItem, removeItem,key, clear 5个方法,和 length 一个属性。

好了,下面我们开始尝试一下吧。

localStorage 中都是以 key/value 的形式来存储数据的,存储的数据类型都是字符串。

如果需要其他类型,需要自行转换。我们可以使用 setItem 方法来存储数据。

也就是  localStorage.setItem(key,value);

上面的这个例子就包括了我们常见的两种用法。

下面我们在介绍几个不同的用法,但是以上面的那两个为主

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  是下标。

好了下面是一个简单的页面 访问计数器。

         
不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell

好了   完成了,大家测试一下吧,当然有各种各样的写法的。

 

下面我们说一下  sessionStorage   的简单用法

哈哈,其实废话了 ,他们的用法相同,区别在文章开始,就说了,

再写一个计数器  sessionStorage   版本的

好了,大家试一下啊,关闭浏览器,打开看真相。

呵呵,前者,木有时间限制,后者浏览器关闭,就结束了。所以记得及时清空前者啊。今天得课程结束喽。

转载于:https://www.cnblogs.com/zhaolizhe/p/6923525.html

你可能感兴趣的文章
互联网架构师必备技术 Docker仓库与Java应用服务动态发布那些事
查看>>
SNMP AGENT函数介绍
查看>>
[Usaco2005 Open]Disease Manangement 疾病管理 BZOJ1688
查看>>
【Android视图效果】分组列表实现吸顶效果
查看>>
多文件上传示例源码(默认支持各种类型,包括图片)
查看>>
命令行基本操作学习笔记(一)
查看>>
「试着读读 Vue 源代码」工程目录及本地运行(断点调试)
查看>>
Tomcat 关于表单提交数据量过大导致数据丢失的问题
查看>>
金融数据库
查看>>
ContentProvider
查看>>
Android 自定义GridView网格布局
查看>>
我的友情链接
查看>>
ThreadLocal分析
查看>>
mysql优化:连接数
查看>>
PHP 时间操作 / 跳转问题
查看>>
Windows 2012 R2 FSMO角色相关小记录
查看>>
(小蚂蚁站长吧)网站优化做好这八步你就是seo第一
查看>>
使用流的方式往页面前台输出图片
查看>>
java核心技术反射
查看>>
LAMP,安装脚本
查看>>