本地存储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 ...
随机推荐
- esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx);
esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx){ if (s_event_init_flag) { return ESP_ ...
- C#-WinForm-★★★★★跨窗体 构造函数传值 及应用—登录式窗口传值、如何关闭主页面时关闭应用程序、如何打开唯一窗口★★★★★
构造函数可以传任意类型的值,并可以同时传多个值 结构函数传值的初步应用——简单的登陆式界面 现在我有两个窗体Form3和Form4,如下,如何点击Form3中的按钮后,打开Form4并将Form3中的 ...
- HTML-★★★★★JavaScritp简介与语法★★★★★
简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件. JavaScript 是 Web 的编程语 ...
- 分分钟钟学会Python -基础&运算符
day002 基础&运算符 1.循环语句 ### 1.循环格式 while 条件: print('') ''' while True: print('人生苦短,我用Python.') ''' ...
- java 的继承
1 为什么要使用继承? 为了提取两个类中公共的代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). java ...
- 关于Sql注入的那些事
登陆注册应该是每一个网站的必做的业务,但是在选择使用Django中的ORM还是说执行原生的Sql语句不同的人应该会有不同的建议,有经验的开发人员都喜欢原生的sql语句,因为相对于ORM来说,执行效率高 ...
- orcale 之 SQL 数据查询
从数据库中检索行,并允许从一个或多个表中选择一个或多个行或列.虽然 SELECT 语句的完整语法较复杂,但是其主要的子句可归纳如下: SELECT select_list [ INTO new_tab ...
- preg_match_all使用实例
<?php $str = <<<EOT <!DOCTYPE html><html><head><meta charset=" ...
- IDE vscode识别webpack中alias配置路径
引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别 https://segmentfault.com/q/1010000011911879 最后 ...
- android 生成随机数
/** * 随机数.字母 工具类 * Created by admin on 2017/2/20. */ public class RandomUntil { /** * 生成 ...