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基本操作的更多相关文章

  1. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  2. HTML5本地存储 localStorage操作使用详解

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  3. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  4. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  5. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  6. Cocos本地存储LocalStorage

    HTML5 LocalStorage 本地存储 //存档 var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSav ...

  7. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  8. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

  9. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

随机推荐

  1. 韩顺平细说Servlet视频系列之tom相关内容

    韩顺平细说Servlet视频系列之tom相关内容 tomcat部署项目操作(注意:6.0版本以后的支持该操作,5.x版本需要另外配置?待验证!) 项目发布到tomcat的webapps文件下,然后启动 ...

  2. struts2.3.15.1 中jsp:include与jsp:forward的用法

    首先配置好struts2的过滤器:web.xml中的配置 <filter> <filter-name>struts-prepare</filter-name> &l ...

  3. mac 上的版本控制工具SmartSVN9.0.4(破解版)

    附带上破解版安装说明: 1.在MAC上选中SmartSVN.dmg,右键->打开2.双击syntevo_keygen.jar 如果没有安装java会自动提示安装的3.输入Name Email(随 ...

  4. 如何使用C#操作快捷方式(获取快捷方式属性、创建快捷方式)

    近来项目中有需要用到一个技术:使用C#操控快捷方式,包含创建和读取等.现整理一下实现方式,分享给大家. 第一步  创建一个项目 无需废话,跳过. 第二步  引用COM组件 右键“引用”,“添加引用”, ...

  5. php验证码的简单例子

    php随机验证码: <?php      $image_width=140;      $image_height=50;      srand(microtime()*10000);      ...

  6. linux内核编译,内核参数修改

    核心(kernel):/boot/vmlinuz-version version 带发行包版本,本地版本内核模块(kernel object): /lib/modules/version/ 内核设计: ...

  7. 爬虫学习之基于Scrapy的爬虫自动登录

    ###概述 在前面两篇(爬虫学习之基于Scrapy的网络爬虫和爬虫学习之简单的网络爬虫)文章中我们通过两个实际的案例,采用不同的方式进行了内容提取.我们对网络爬虫有了一个比较初级的认识,只要发起请求获 ...

  8. The Black Hole of Numbers (strtoint+inttostr+sort)

    For any 4-digit integer except the ones with all the digits being the same, if we sort the digits in ...

  9. PHP webserver 之 soap wsdl

    强势插入:http://pan.baidu.com/s/1jG62oKm

  10. C#.Net EF实体框架入门视频教程

    当前位置: 主页 > 编程开发 > C_VC视频教程 > C#.Net EF实体框架入门视频教程 > kingstone金士顿手机内存卡16G仅65元 1.EF实体框架之增加查 ...