HTML5新特性之Web Storage
Web Storage是HTML5新增的特性，能够在本地浏览器存储数据，对数据的操作很方便，最大能够存储5M。
Web Storage有两种类型: SessionStorage 和 LocalStorage。SessionStorage是在浏览器打开的时间内保存数据，当关闭网页的时候数据随之丢弃。LocalStorage保存的数据不会随着网页和浏览器的关闭而消失，它会保存在本地，当网页再次打开的时候，数据依然存在。
Web Storage有四种常用的方法：
getItem("Key"); //获得数据
setItem("Key",value); //存储数据
removeItem("Key"); //删除数据
clear(); //批量删除数据
应用例子：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="text" id="text1">
9 <input type="button" value="session_set" onclick="save_session()">
10 <input type="button" value="session_get" onclick="load_session()">
11 <br>
12 <input type="text" id="text2">
13 <input type="button" value="local_set" onclick="save_local()">
14 <input type="button" value="local_get" onclick="load_local()">
15 <script>
16 function save_session(){
17 var target=document.getElementById("text1");
18 var str=target.value;
19 sessionStorage.setItem("text_message",str);
20 }
21 function load_session(){
22 var str=sessionStorage.getItem("text_message");
23 alert(str);
24 }
25 function save_local(){
26 var target=document.getElementById("text2");
27 var str=target.value;
28 localStorage.setItem("text_message",str);
29 }
30 function load_local(){
31 var str=localStorage.getItem("text_message");
32 alert(str);
33 }
34 </script>
35 </body>
36 </html>
链接地址：http://1.huizit1.applinzi.com/HTML5/web_storage/webstorage.html
HTML5新特性之Web Storage的更多相关文章
- HTML5 十大新特性(九)——Web Storage
H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...
- HTML5新特性之Web Worker
1.概述 JavaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事.随着电脑计算能力的增强,这一点带来很大的不便,无法充分发挥JavaScript的潜能.龙其考虑到 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性：范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
随机推荐
- Win系统下的免杀思路（总结非教程）
1.简介 在安全厂商日趋成熟的背景下,编写免杀马的难度和成本日益增长.好用新兴的开源项目在短时间内就被分析并加入特征库.笔者调研了部分开源项目,其中也有项目做了类似的分析 [1],目前能够免杀的项目初 ...
- 计网学习笔记六 Network Layer Overview
这节课开始进入了网络层的学习,讲述了网络层提供的功能,还有路由器内部是什么样子的,以及virtual circuit网络和datagram网络的一点比较. 网络层有什么作用呢?用一句话来说,就是需要负 ...
- pandas之concat链接操作
Pandas 通过 concat() 函数能够轻松地将 Series 与 DataFrame 对象组合在一起,函数的语法格式如下: pd.concat(objs,axis=0,join='outer' ...
- [Java SE/JDK]Intellij IDEA中设置JDK版本
1 Intellij IDEA 修改JDK版本 第1步:配置JDK环境变量 装好JDK之后,要添加一个环境变量:JAVA_HOME 第2步:修改Idea配置 由Maven决定的版本 <build ...
- Java并发(一)----进程、线程、并行、并发
一.进程与线程 进程 程序由指令和数据组成,但这些指令要运行,数据要读写,就必须将指令加载至 CPU,数据加载至内存.在指令运行过程中还需要用到磁盘.网络等设备.进程就是用来加载指令.管理内存.管理 ...
- fio性能测试-环境搭建，功能介绍，测试讲解
fio性能测试-环境搭建,功能介绍,测试讲解 Fio介绍:FIO(Flexible I/O Tester)是一个用于测试磁盘.文件系统.块设备和网络设备性能的工具.它可以模拟不同类型的I/O负载,包括 ...
- 20-优化配置介绍、HMR
webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓 ...
- 12-提取css成单独文件
const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const M ...
- Python 函数传递任意数量的实参
函数传递任意数量的实参 *形参名,形参名中的星号让python创建了一个空元组,并将收到的所有值都封装到这个元组中 # 案例 *toppings 形参名中的星号让python创建了一个空元组,并将收到 ...
- Python 项目：外星人入侵----第一部分
外星人入侵 1.规划项目 玩家控制着一艘最初出现在屏幕底部中央的飞船,玩家可以使用箭头键左右移动飞船,还可以使用空格键进行射击,游戏开始时,一群外星人出现在天空中,他们在屏幕中下移动.玩家任务是射杀这 ...