Html5的学习之旅-Html5的web Storage概述（16）

时间：2023-02-23 14:56:51

在html5中除了canvas，另外一个非常重要的功能是客户端本地存储web storage，之前可以在用户端Cookies存贮用户名等信息，后来发现Cookies存储存在以下问题：

大小：Cookies的大小被限制在4kb左右

带宽：Coolies是随着Http业务被一起发送的，因此会浪费一部分带宽

复杂性：要正确的操作Cookies是很苦难的

针对以上问题，html5提出了一种在本地保存数据的方法：web storage

它有两种处理方式：

session storage：将数据保存在session对象中。session是用户打开这个网站到关闭这个网站，所经历的时间，也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。

local storage：将数据保存在客户端的硬件（硬盘）中，即使用户的浏览器关闭了。下次打开时候，也会重新加载

session storage实例

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script>
</head>
<body>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage('input')">
    <input type="button" value="读取数据" onclick="loadStorage('msg')">
</body>
</html>

appWeb代码

/**
 * Created by joy liu on 2015/9/22.
 */
function saveStorage(id){
    var target = document.getElementById(id);
    var string = target.value;
    sessionStorage.setItem("message",string);
}
function loadStorage(id){
    var target = document.getElementById(id);
    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

！！！！效果图

Html5的学习之旅-Html5的web Storage概述（16）

local storage的实例

index代码没变，js代码

/**
 * Created by joy liu on 2015/9/22.
 */
//function saveStorage(id){
//    var target = document.getElementById(id);
//    var string = target.value;
//    sessionStorage.setItem("message",string);
//}
//function loadStorage(id){
//    var target = document.getElementById(id);
//    var msg = sessionStorage.getItem("message");
//    target.innerHTML = msg;
//}
function saveStorage(id){
    var target = document.getElementById(id);
    var string = target.value;
    localStorage.setItem("message",string);
}
function loadStorage(id){
    var target = document.getElementById(id);
    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}

效果图

Html5的学习之旅-Html5的web Storage概述（16）

Html5的学习之旅-Html5的web Storage概述（16）的更多相关文章

  1. HTML5 Web Storage概述

    Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...

  2. html5学习之旅-html5的简易数据库开发（18）

    实际上是模拟实现html5的数据库功能,用键值对的方式. !!!!!!废话不多说 ,代码 index.html的代码 <!DOCTYPE html> <html lang=&quot ...

  3. Html5学习之旅-html5的留言记事本开发（17）

    web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...

  4. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  5. Web Storage

    前面的话 Web存储最初作为HTML5的一部分被定义成API形式,但是后来被剥离出来作为独立的一份标准了.该标准目前还在草案阶段,但其中一部分内容已经被包括IE8在内的所有主流浏览器(可交互地)实现了 ...

  6. web API简介&lpar;三&rpar;：客户端储存之Web Storage API

    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...

  7. &lpar;转&rpar;HTML5开发学习（3）&colon;本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

  8. HTML5权威指南--Web Storage&comma;本地数据库&comma;本地缓存API&comma;Web Sockets API&comma;Geolocation API&lpar;简要学习笔记二&rpar;

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  9. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

随机推荐

  1. python学习05——字典

    笨办法学python第39节 这节主要讲解的是字典,首先字典和列表的两个区别是: 1. 列表中可以通过数字找到列表中的元素,是数字作为索引的:字典中可以通过任何东西找到想要的元素,即字典可以将一个物件 ...

  2. WEB用户访问控制方法

    分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 一直以来,我对用户/权 ...

  3. 【python】【转】 for 循环一列

    Python for in循环 来源 http://c.biancheng.net/cpp/html/1822.html   for..in语句是另一个循环语句,它迭代一个对象的序列,例如经历序列中的 ...

  4. Naive Bayes Theorem and Application - Theorem

    Naive Bayes Theorm And Application - Theorem Naive Bayes model: 1. Naive Bayes model 2. model: discr ...

  5. Python 数据处理扩展包： numpy 和 pandas 模块介绍

    一.numpy模块 NumPy(Numeric Python)模块是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list str ...

  6. HDU 2063 过山车 二分图题解

    一个男女搭配的关系图,看能够凑成多少对,基本和最原始的一个二分图谜题一样了,就是 一个岛上能够凑成多少对夫妻的问题. 所以是典型的二分图问题. 使用匈牙利算法,写成两个函数,就很清晰了. 本程序还带分 ...

  7. Go&lowbar;19&colon; Golang 中错误与异常需要重新认识

    如何进行错误处理,这是一个Go程序员之间,特别是一些新的Go程序员,会经常讨论的问题.讨论到最后往往由于以下代码的多次出现而变成了抱怨. if err != nil { return err } 我们 ...

  8. 3&period;rabbitmq 发布&sol;订阅

    1. 发布者 #coding:utf8 import pika import json import sys message = ''.join(sys.argv[1:]) or "hell ...

  9. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  10. Kafka 集群搭建 （自用）

    Zookeeper集群搭建 1.软件环境 (3台服务器-测试环境) 192.168.56.9 192.168.56.6 192.168.56.7 1.Linux服务器一台.三台.五台.(2*n+1), ...

相关文章