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的用法及示例的更多相关文章

  1. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  2. HTML5 的 localStorage(本地数据库) 的用法

    判断浏览器是否支持localStorage可以使用下面的代码:if(window.localStorage){     alert("支持localStorage") }else{ ...

  3. H5新增的Web Storage本地存储

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  4. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  5. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  6. localStorage本地存储的用法

    localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...

  7. HTML5 本地存储的用法

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  8. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

随机推荐

  1. git 和 repo 常用命令

    一.git 1.回退到某个节点 git reset --hard f39043d1c0cd1cda45a4569556758d0c00bf329a 2.查看提交记录 git log git log - ...

  2. weex 初始化

    文档教程 一. 已有项目集成weex, 有时候会报错, 因为sdk中用到了socket pod 'WeexSDK' pod 'SocketRocket' 二. 在app启动方法 -didFinish ...

  3. 洛谷 P3204 [HNOI2010]公交线路

    题面 luogu 题解 矩阵快速幂\(+dp\) 其实也不是很难 先考虑朴素状压\(dp\) \(f[i][S]\) 表示最慢的车走到了\(i\),\([i, p+i-1]\)的覆盖情况 状态第一位一 ...

  4. PHP 数字金额转换成中文大写金额的函数 数字转中文

    /** *数字金额转换成中文大写金额的函数 *String Int $num 要转换的小写数字或小写字符串 *return 大写字母 *小数位为两位 **/ function num_to_rmb($ ...

  5. python设计模式--读书笔记

    GoF在其设计模式一书中提出了23种设计模式,并将其分为三类: 创建型模式 将对象创建的细节隔离开来,代码与所创建的对象的类型无关. 结构型模式 简化结构,识别类与对象间的关系,重点关注类的继承和组合 ...

  6. Rancher 1.6 版本 只能在 linux 下用

    实际操作 启动 , 访问方式 : 在启动过程中会发现没有 image , 然后自动下载 ( 执行 docker pull 命令 ) docker run --rm --privileged -v /v ...

  7. Mac上实现对Python的版本切换

    最近朋友邀请我帮忙写个比特币自动化交易程序,要求的平台是Okex,用Python写,之前到是自己学过一点自动化交易,不过是MT5的.看了一下Okex提供的API接口,和MT5不一样,它并没有现成的ID ...

  8. 浅谈C#.NET防止SQL注入式攻击

    1#region 防止sql注入式攻击(可用于UI层控制)  2  3///   4/// 判断字符串中是否有SQL攻击代码  5///   6/// 传入用户提交数据  7/// true-安全:f ...

  9. SC OpenService 失败5:拒绝访问

    当我们在cmd里使用 sc delete  服务名  ,来删除服务的时候,报错误,SC OpenService 失败5:拒绝访问. 这似乎是因为权限不够,解决方法. 首先,我们必须先取得管理员权限,以 ...

  10. MySQL限制查询结果返回的数量limit

    1限制查询结果 [limit {[offset,] row_count | row_count offset}] row_count 起始行(第一行是0) offset 偏移量 输出几行记录