HTML5学习(八)----Web存储

参考地址：http://www.w3school.com.cn/html5/html_5_webstorage.asp

在客户端存储数据

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

localStorage - 没有时间限制的数据存储，localStorage 存储数据是长久的
sessionStorage - 针对一个 session 的数据存储 sessionStorage 存储数据只是在一个会话中时行存储

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

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

localStorage.lastname="Smith";

document.write("Last name: " + localStorage.lastname);

</script>

</body>

</html>

访问网页次数计数：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

if (localStorage.pagecount)

    {

    localStorage.pagecount=Number(localStorage.pagecount) +1;

    }

else

    {

    localStorage.pagecount=1;

    }

document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>

</body>

</html>

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

</body>

</html>

访问次数统计：

<!DOCTYPE HTML>

<html>

<body>

<script type="text/javascript">

if (sessionStorage.pagecount)

    {

    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

    }

else

    {

    sessionStorage.pagecount=1;

    }

document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>

</body>

</html>

HTML5学习(八)----Web存储的更多相关文章

HTML5学习笔记 Web存储
HTML5 web存储,一个比cookie更好的本地存储方式. 什么是html5 Web存储使用HTML5可以在本地存储用户的浏览器数据. 早些时候,本地存储使用的是cookies.但是Web存储需 ...
HTML5学习之Web存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前, ...
HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
HTML5分析实战Web存储机制(Web Storage)
Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...
HTML5学习总结——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
[html] 学习笔记--Web存储
HTML5 提供了两种在客户端存储数据的新方法之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效 ...
HTML学习之Web存储（五）
本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...
HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

sql语句中----删除表数据的&quot&semi;三兄弟&quot&semi;
说到删除表数据的关键字,大家记得最多的可能就是delete了然而我们做数据库开发,读取数据库数据.对另外的两兄弟用得就比较少了现在来介绍另外两个兄弟,都是删除表数据的,其实也是很容易理解的老大- ...
Prototype in JavaScript
声明本文旨在入门,简单了解下何为prototype & __proto__ 原型对象我们创建每个函数都有个prototype(原型)属性,该属性是一个指针,指向一个对象,而这对象的用途是包 ...
Django——model字段类型 2
Django 通过models实现数据库的创建.修改.删除等操作,Django中model作为数据资源指定了字段以及一些相应的功能,通常每个model对应数据库中的一张表,(每个model都是从dja ...
dedecms手机站要同步pc站的图片
首先在dede目录下面找到 /include/extend.func.php 文件 //添加自定义函数 function replaceurl($newurl){ $newurl=str_repl ...
BZOJ 3653 谈笑风生
ORZ blutrex...... 主席树. #include<iostream> #include<cstdio> #include<cstring> #incl ...
linux服务器部署jar包以及shell脚本的书写
背景:记录在linux环境下部署jar程序的过程 1 部署过程记录 1.1 程序结构这里的main函数就在DemRest2.java 文件中. 为了部署方便,要做到以下两点: 1 在导出的jar包中 ...
laydate时间组件
laydate时间组件使用笔记 /*! laydate-v5.0.9 日期与时间组件 MIT License http://www.layui.com/laydate/ By 贤心 */ ;!func ...
mysql 分区 1526错误
mysql 分区原文:http://fyzjhh.blog.163.com/blog/static/1694442262012544429953/ 参考:https://bugs.mysql.com ...
Ubuntu 16&period;04 LTS 下安装 ibus-rime 输入法
搜 Linux 下粤拼输入法的时候发现了 Rime,由于 fcitx 下的拼音输入体验实在不太好(搜狗是在我的电脑上完全坏掉了,调不出来,配置文件的问题一直没解决:谷歌是好过没有),于是安装 ibus ...
iOS开发之使用UIView-Positioning简化页面布局
使用过代码布局的人可能会有这样的感觉,给控件设置frame的时候比较繁琐.最近在Github上看到有一个UIView的一个分类UIView-Positioning,这个分类提供了一些属性,比如lef ...