本地存储localStroage的用法及示例
localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制。
localStorage的主要API:
localStorage.setItem(key,value); key是保存数据的变量,value是保存的数据
localStorage.getItem(key); 读取之前存储的数据
一个小例子,两个按钮和一段文字,点击放大按钮文字变大,点击缩小按钮文字变小,使用客户端存储 再次刷新页面文字还是保持最后一次的文字大小。这样就实现了根据用户习惯来提升用户体验。
html结构:
<button id="changeLarge">放大</button>
<button id="changeSmall">缩小</button>
<p class="article" style="font-size:12px">有一段青春,埋葬的时间。总有一些人拼了命的,挽留最终还是留不住。总有一些话始终未能说出口,直至最后再也不必说出口。埋葬过去,我们有着太多的沉默。像是在时间的路刚好遇见,只是你装做什么也没看见。很多年过去了,我始终在这里执着。时间走过这里并没有,我想要的段落。也许下一段时光,会遇见一个更好的彼岸。流年划过陌路,我们终于渐行渐远。来不及说再见,也来不及为那段。往事而伤心哭泣,一切要走都是上天。许早准备好的,只待我们路过此地。</p>
js实现代码:
window.onload=function(){
var changeLarge=document.getElementById('changeLarge');
var changeSmall=document.getElementById('changeSmall');
var article=document.getElementsByClassName('article')[0]; var fontSize;
if(localStorage.getItem("fontsize")!="undefined"){ //如果读取到数据
fontSize=parseInt(localStorage.getItem("fontsize")); //把数据放到fontSize变量中
}else{
fontSize=12;
} article.style.fontSize=fontSize+'px'; //设置当前article的文字大小
/*点击放大按钮文字变大*/
changeLarge.onclick=function(){
fontSize+=1;
localStorage.setItem("fontsize",fontSize); //存储fontSize
article.style.fontSize=fontSize+'px';
}
/*点击缩小按钮文字缩小*/
changeSmall.onclick=function(){
fontSize-=1;
localStorage.setItem("fontsize",fontSize);
article.style.fontSize=fontSize+'px';
}
}
本地存储localStroage的用法及示例的更多相关文章
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- HTML5 的 localStorage(本地数据库) 的用法
判断浏览器是否支持localStorage可以使用下面的代码:if(window.localStorage){ alert("支持localStorage") }else{ ...
- H5新增的Web Storage本地存储
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性
localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...
- localStorage本地存储的用法
localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...
- HTML5 本地存储的用法
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
随机推荐
- git 和 repo 常用命令
一.git 1.回退到某个节点 git reset --hard f39043d1c0cd1cda45a4569556758d0c00bf329a 2.查看提交记录 git log git log - ...
- weex 初始化
文档教程 一. 已有项目集成weex, 有时候会报错, 因为sdk中用到了socket pod 'WeexSDK' pod 'SocketRocket' 二. 在app启动方法 -didFinish ...
- 洛谷 P3204 [HNOI2010]公交线路
题面 luogu 题解 矩阵快速幂\(+dp\) 其实也不是很难 先考虑朴素状压\(dp\) \(f[i][S]\) 表示最慢的车走到了\(i\),\([i, p+i-1]\)的覆盖情况 状态第一位一 ...
- PHP 数字金额转换成中文大写金额的函数 数字转中文
/** *数字金额转换成中文大写金额的函数 *String Int $num 要转换的小写数字或小写字符串 *return 大写字母 *小数位为两位 **/ function num_to_rmb($ ...
- python设计模式--读书笔记
GoF在其设计模式一书中提出了23种设计模式,并将其分为三类: 创建型模式 将对象创建的细节隔离开来,代码与所创建的对象的类型无关. 结构型模式 简化结构,识别类与对象间的关系,重点关注类的继承和组合 ...
- Rancher 1.6 版本 只能在 linux 下用
实际操作 启动 , 访问方式 : 在启动过程中会发现没有 image , 然后自动下载 ( 执行 docker pull 命令 ) docker run --rm --privileged -v /v ...
- Mac上实现对Python的版本切换
最近朋友邀请我帮忙写个比特币自动化交易程序,要求的平台是Okex,用Python写,之前到是自己学过一点自动化交易,不过是MT5的.看了一下Okex提供的API接口,和MT5不一样,它并没有现成的ID ...
- 浅谈C#.NET防止SQL注入式攻击
1#region 防止sql注入式攻击(可用于UI层控制) 2 3/// 4/// 判断字符串中是否有SQL攻击代码 5/// 6/// 传入用户提交数据 7/// true-安全:f ...
- SC OpenService 失败5:拒绝访问
当我们在cmd里使用 sc delete 服务名 ,来删除服务的时候,报错误,SC OpenService 失败5:拒绝访问. 这似乎是因为权限不够,解决方法. 首先,我们必须先取得管理员权限,以 ...
- MySQL限制查询结果返回的数量limit
1限制查询结果 [limit {[offset,] row_count | row_count offset}] row_count 起始行(第一行是0) offset 偏移量 输出几行记录