在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端保存如用户名等简单用户信息，但通过长期使用，人们发现Cookies储存永久数据存在几个问题

  • 大小：Cookies的大小被限制在4kb
  • 带宽：Cookies是碎HTTP事物一起被发送的，因此会浪费一部分发送Cookies时使用的带宽
  • 复杂性：要正确的操纵Cookies是很困难的

针对这些问题，HTML5中，重新提供了一种在客户端本地保存数据的功能，就是Web Storage功能，顾名思义，Web Storage功能就是在Web上存储数据的功能，这里的存储是针对客户端本地而言的。具体分两种

  • sessionStorage：将数据保存在session对象中。Session是值用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所胡斐的时间。Session对象可以用来保存在这段时间内所要求保存的任何数据
  • localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，改数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。若要删除，可直切清除cookies即可；在程序中，可执行localStorage.clear（）来清除

例子

html网页文件

<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>

js文件

function saveStorage(id) {

    var target = document.getElementById(id);

    var str = target.value;

    // 保存数据的方法

    // sessionStorage.setItem("message",str);

    localStorage.setItem("message",str);

}

function loadStorage(id) {

    var target = document.getElementById(id);

    // 读取数据

    // var msg = sessionStorage.getItem("message");

    var msg = localStorage.getItem("message");

    target.innerHTML = msg;

}

html---Web Storage存储的更多相关文章

  1. html5本地存储（一）------ web Storage

    在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...

  2. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  3. HTML5 高级系列：web Storage

    前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...

  4. [web 前端] web本地存储（localStorage、sessionStorage）

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  5. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  6. cookie与web Storage

    一.cookie 1. http头与cookie cookie是HTTP Cookie的简称.该标准要求: (1)服务器的HTTP响应头包含 Set-Cookie字段 响应头Eg: HTTP/1.1 ...

  7. 数据存储之Cookie和Web Storage。

    Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...

  8. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  9. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  10. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

随机推荐

  1. SpringCloud的学习记录(7)

    这一章节讲zuul的使用. 在我们生成的Demo项目上右键点击New->Module->spring Initializr, 然后next, 填写Group和Artifact等信息, 这里 ...

  2. polyfill 一个解决兼容的绝佳方案

    polyfill为何物 Polyfill你可以理解为“腻子”,就是装修的时候,可以把缺损的地方填充抹平. 举个例子,html5的storage(session,local), 不同浏览器,不同版本,有 ...

  3. Linux安装中文字体包

    进入rhel5.5安装盘/Server路径找到字体安装包: fonts-chinese-3.02-12.el5.noarch.rpm fonts-ISO8859-2-75dpi-1.0-17.1.no ...

  4. PS：将一个图片变成圆形

    1.选择一张正方形图片并放置到PS软件中 2.选择“选框工具”->右击选择"椭圆选框工具” 3.画出你要圆形内的范围: 4.选择两种方式中的一种,实际上效果是一毛一样的 5.右下角就会 ...

  5. 数黑格有多少个，模拟题，POJ(1656)

    题目链接:http://poj.org/problem?id=1656 #include <stdio.h> #include <iostream> #include < ...

  6. 模拟插队，出队，POJ(2259)

    题目链接:http://poj.org/problem?id=2259 水题一个,就是要记录一下每个队列是否有人bool[i], #include <iostream> #include ...

  7. 2018.9.3 CEP课程总结

    什么是CEP课程? 职业生涯规划课程 蓝桥介绍 立人达人 全人教育 人文 重视人 尊重人 关心人 爱护人 人才 人格 简历的制作 找工作的流程? 1.简历的准备------>投发简历(自己投.老 ...

  8. kiiti分割的数据及其处理

    kitti和cityscape的gt的分割不太一样,下边缘不再是从黑色开始的,而是直接是类别 red,green,blue = img_gt[i,j] 1.道路的颜色(紫色):128 64 128 2 ...

  9. 运行时库例程-acc_get_num_devices

    格式C 或 C++: int acc_get_num_devices( acc_device_t ); 描述例程 acc_get_num_devices 返回主机上指定类型的加速器设备数量.输入参数说 ...

  10. BIO与NIO

    BIO与NIO 1.传统BIO (1)特点 面向数据流 阻塞式传输 一个客户端对应一个线程 在客户机增多的情况下,线程资源随之增多,会造成cpu资源枯竭 (2)需求 ​ 客户机向服务器输出字符串,逐一 ...