html---Web Storage存储
在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存储的更多相关文章
- html5本地存储（一）------ web Storage
在html5中与本地存储相关的两个相关内容:Web Storage 与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- HTML5 高级系列：web Storage
前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...
- [web 前端] web本地存储（localStorage、sessionStorage）
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储（localStorage、sessionStorage）
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- cookie与web Storage
一.cookie 1. http头与cookie cookie是HTTP Cookie的简称.该标准要求: (1)服务器的HTTP响应头包含 Set-Cookie字段 响应头Eg: HTTP/1.1 ...
- 数据存储之Cookie和Web Storage。
Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
随机推荐
- 【工作中学习】CreateProcessAsUser失败，错误码：1314
事情起因是这样, 产品的Windows服务(Service)之前一直是用Local System Account在运行的,但这个版本有需求要换成使用普通的Domain User来运行,如下图: 但却出 ...
- 【菜鸟学Linux】Cron Job定期删除Log（日志）文件
以前一直做Windows开发,近期的项目中要求使用Linux.作为小菜鸟一枚,赶紧买了一本经典书<鸟哥的Linux私房菜>学习.最近刚好有一个小任务 - 由于产品产生的Log很多,而且增长 ...
- wechat开发笔记之1.线上环境搭建与测试
Wechat开发笔记 线上环境搭建: 申请一个wechat公众平台. 手机个人微信可以用webwechat来测试. Website:https://web.weixin.qq.com/ 手机客户端扫一 ...
- python socket练习
服务器端 #服务器端 import socket server = socket.socket() server.bind(('localhost',6969))#绑定要监听的端口 server.li ...
- Azure 3 月新公布
Azure 3 月新发布:Power BI Embedded,R Server 和 IoT 套件预测性维护预配置解决方案正式发布,ExpressRoute 部署变更,以及计量名称变更 Power BI ...
- [译文]PHP千年虫(y2k compliance）
时钟将我们无情地逼近2000年的最后一年,第二年厄运塞耶斯都预言前所未有的电脑故障在每一个可以想象的领域.通常被称为2000年问题,或千年虫,这种 情况很容易解释.程序解释两位在形成XX日期19 XX ...
- MHA 日常维护命令集
MHA 日常维护命令集 1.查看ssh登陆是否成功 masterha_check_ssh --global_conf=/etc/masterha/masterha_default.conf --con ...
- maven简单了解,没有Maven和使用Maven的区别
Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期.Maven让开发人员的工作更轻松,同时创建报表,检查,构建和 ...
- 项目 XXX 受源代码管理。向源代码管理注册此项目时出错。建议不要对此项目进行任何修改
原本带vss或者svn管理的项目独立复制出来后,如果出现下面问题 解决办法: 使用记事本打开,项目csproj文件删除图中
- 前端JavaScript之BOM
BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: ...