HTML5 JS API 本地存储LocalStorage基本操作
LocalStorage:
使用方法与SessionStorage如出一辙,如下代码所示:
此对象主要有两个方法:
保存数据:localStorage.setItem(Key, value);
读取数据:localStorage.getItem(Key);
Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。
使用方法:
保存数据:localStorage.setItem("website", "W3Cfuns.com");
读取数据:localStorage.getItem("website");
案例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5每日一练之JS API-本地存储LocalStorage | 前端开发网(W3Cfuns.com)!</title>
<script type="text/javascript">
window.onload = function()
{
alert("当你关闭此页面或者关闭浏览器的时候,localStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,可以取到数据。") //首先获得body中的3个input元素
var msg = document.getElementById("msg");
var getData = document.getElementById("getData");
var setData = document.getElementById("setData"); setData.onclick = function()//存入数据
{
if(msg.value)
{
localStorage.setItem("data", msg.value);
alert("信息已保存到data字段中");
}
else
{
alert("信息不能为空");
}
} getData.onclick = function()//获取数据
{
var msg = localStorage.getItem("data");
if(msg)
{
alert("data字段中的值为:" + msg);
}
else
{
alert("data字段无值!");
}
}
}
</script>
</head> <body>
<input id="msg" type="text"/>
<input id="setData" type="button" value="保存数据"/>
<input id="getData" type="button" value="获取数据"/>
</body>
</html>
尊重每一名RD成果。。原文链接:http://www.w3cfuns.com/article-5592538-1-1.html
HTML5 JS API 本地存储LocalStorage基本操作的更多相关文章
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- HTML5本地存储 localStorage操作使用详解
1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- HTML5新增的本地存储功能(笔记)
HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...
- Cocos本地存储LocalStorage
HTML5 LocalStorage 本地存储 //存档 var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSav ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储 localStorage
本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
随机推荐
- Mysql 作业(Scheduler)
200 ? "200px" : this.width)!important;} --> 介绍 作业也叫做事件调度,其实它也就是一个时间触发器:它可以定义某个时间点执行指定的数 ...
- JAVA_SE复习(多线程)
线程 1.两种创建线程的方式都有自身的优点. 实现 Runnable 接口的优点: 从面向对象的设计观点看,Thread 类严格来讲是一个虚拟CPU 的封装,因此只有要改变或扩展该CPU 模型 ...
- 教您如何使用MySQL group_concat函数
MySQL group_concat函数是典型的字符串连接函数,下面就为您介绍MySQL group_concat的语法,希望对您学习MySQL group_concat函数有所帮助. MySQL g ...
- C# 实现HTML5服务器推送事件
为什么需要服务器推送事件: 因为如果需要保持前台数据的实时更新例如,IM聊天,股票信息, 1.可以在客户端不断地调用服务端的方法来获得新数据,但是这样会很消耗服务器资源,导致系统变慢! 2 html5 ...
- css和jQuery ,字符串中重新定义单个字符样式背景
<table class="tb2"> <tr><td class="td1">融资登记企业<span>985& ...
- C#实现打印与打印预览功能
C#实现打印与打印预览功能的思路及代码. 在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的打印功能都以组件的 ...
- 自从用了Less 编写css,你比以前更快了~(sublime编译)
之所以用这个标题呢,主要是最近调侃杰伦太有意思了. 好吧,开个玩笑而已. 如果你了解过Less,并对之很熟悉,就不用往下看了. 如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的 ...
- C++ 编写 CorelDRAW CPG 插件例子(2)—ClearFill
这是另一个例子: 贴上主要代码: #include "stdafx.h" #include <tchar.h> #import "libid:95E23C91 ...
- SQL动态更新表字段 传入字段可能为空
小技巧: 项目组有修改产品的基本信息字段 但有时候传入的字段可能为空 也可能不为空 动态修改表中字段. USE [BetaProductMarket_DB] GO )) BEGIN DROP PRO ...
- NYOJ 994 海盗分金 逆向递推
链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=994 题意: 有n个海盗劫得了窖藏的m块金子,并准备瓜分这些战利品.按照古老流传下来的分金法则 ...