在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. android sqlite3命令行检查自己的代码操作数据库是否正确

    真机调试的话需要root ,否则没有访问目录的权限 在 linux 的终端 或者 windows的cmd 中输入 adb shell 进入shell 环境 cd /data/data/程序包名/dat ...

  2. Linux命令之创建文件夹3

    1)mkdir  fyr即可在当前目录下创建一个文件夹 2)在fyr文件夹下创建一个子目录 mkdir fyr/fyr1 注意:如果不存在父层目录直接创建对应父层目录下的子目录mkdir  FYR/f ...

  3. SQL查询某一字段重复的数据

    查询出重复记录 select * from 数据表 WHERE 重复记录字段 in ( select 重复记录字段 from  数据表 group by 重复记录字段 having count(重复记 ...

  4. winxp如何开启SNMP服务

    1.先安装SNMP组件 开始——>    控制面板——>添加或删除程序——>添加/删除windows组件——>管理和监视工具(前面方框选择后)——>详细信息——>简 ...

  5. jquery中$.ajax()方法使用详解

    1.url 说明:发送请求的地址(默认为当前页面),要求是String类型的参数,比如是.net下,"~wexin(控制器)/getweinxinmenu(动作)", 2.type ...

  6. cesium 动态水面效果

    后续继续更新

  7. FYI-django数据库操作-外键

    我先定义两个模型,一个是作者,一个是作者出版的书籍,算是一对多的类型.   class Person(models.Model); name = models.CharField('作者姓名', ma ...

  8. Graylog安装操作

    Graylog安装操作 实验环境centos7.5系统  mem:4-8G       disk:50G 关闭selinux以及firewalld 一.准备环境 1.1.java环境 下载java的j ...

  9. CPP-STL：用vector保存对象时保存指针的优点, 以及reserve的使用（转）

    代码1 #include <vector> #include <stdio.h> class A { public: A() { printf("A()/n" ...

  10. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...