今天接到一个任务，说是让自动调节textarea标记的输入高度，而且还要记录下来，下次登录的时候还是调节后的高度，我第一时间就想到了localStorage的用法，直接代码献上：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="pg_reset.css">  //我自己的公共样式
    <style>
        textarea{
            width: 700px;
            height: 154px;
            border: 1px solid #4f90c2;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
高度：<select id="txtHeight">
    <option value="0.4">0.4倍</option>
    <option value="0.6">0.6倍</option>
    <option value="0.8">0.8倍</option>
    <option value="1" selected>1倍</option>
    <option value="1.2">1.2倍</option>
    <option value="1.4">1.4倍</option>
    <option value="1.6">1.6倍</option>
</select>
<div>
    <textarea id="textarea1"></textarea>
</div>
<div>
    <textarea id="textarea2"></textarea>
</div>

<script src="jquery-1.11.3.js"></script>
<script>

    var objText=$.fn.objText={
        id1:'#textarea1',//上面一个本文的id值
        id2:'#textarea2',//下面一个文本的id值
        txtId:'#txtHeight',//select选择框的id值
        height:154,//对应的是textarea初始的时候设置的高度  两个高度最初始的时候应该是一样的
        init:function () {
            $(this.txtId).val(window.localStorage.txtHg);
            this.winFun();
            this.start();
        },
        start:function () {
            var _this=this;
            $(_this.txtId).change(function () {
                window.localStorage.txtHg=$(this).val();
                _this.winFun();
            });
        },
        winFun:function () {
            $(this.id1).css({
                height:this.height*window.localStorage.txtHg+'px'
            });
            $(this.id2).css({
                height:(this.height*2-$(this.id1).height())+'px'
            });
        }
    };
    objText.init();
</script>

</body>
</html>

有时间可以关注一下我的博客，有好的意见也希望大家多交流，技术在于讨论中进步：http://www.cnblogs.com/laiqiangjin 

浅谈localStorage的用法的更多相关文章

  1. 浅谈localStorage本地存储

    在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...

  2. Linux之浅谈VIM常见用法及原理图

    本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类:       行编辑器:sed       全屏编辑器:nano,vi        vim - Vi改进 其他编辑器:     ...

  3. 浅谈localStorage的使用场景和优劣势，以及sessionStorage和cookie

    一.localStorage,sessionStorage,cookie的简单介绍 localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器 ...

  4. 浅谈intval()函数用法

    <? } } 总结:intval()函数功能1.参数一定是数字否则会报错,2.如果是数字那一定是整数,如果有小点,那会省略掉,3,强调参数可以有“-”值.4.参数第一位不应为0开头,不然会自动转 ...

  5. 浅谈localStorage、sessionStorage 与cookie

    由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...

  6. 浅谈AutoResetEvent的用法

    using System;using System.Threading; namespace AutoResetEvent_Examples{    class MyMainClass    {    ...

  7. 浅谈Task的用法

    Task是用来实现多线程的类,在以前当版本中已经有了Thread及ThreadPool,为什么还要提出Task类呢,这是因为直接操作Thread及ThreadPool,向线程中传递参数,获取线程的返回 ...

  8. 浅谈background的用法

    div css 背景样式background属性 一.语法及参数 1.语法:background : background-color(颜色) || background-image(图片地址) || ...

  9. 浅谈Python在信息学竞赛中的运用及Python的基本用法

    浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...

随机推荐

  1. ArcGIS图框工具5.2发布，支持ArcGIS10.0,10.110.2，支持国家2000坐标系

    ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系 下载地址http://files.cnblogs.com/gisoracle/atktoolnew. ...

  2. win7上装红米4手机驱动提示空间不足

    首先说:小米的垃圾支持.我在支持页面上看着 miuiV4或V5版本,再看我手机上9.5的版本.就感觉有些不妙. 下载下来后,点击安装程序,提示我安装空间不足......我F盘可用空间140G,不够你造 ...

  3. Android学习——Fragment静态加载

    从今天开始做一套安卓的学习笔记,开发环境是Android Studio,把学习过程中的知识和遇到的问题都写在这里,先从Fragment开始学起. Fragment概述 Fragment是Android ...

  4. IFrame安全问题解决办法（跨框架脚本(XFS)漏洞）

    最近项目要交付了,对方安全测试的时候检测出高危险漏洞,由于刚参加工作不久,经验不足,未涉及过此方面的东西.经过一番查询和探索,最终解决了这个问题,记录一下. 发现的漏洞为缺少跨框架脚本保护.跨框架脚本 ...

  5. UIRecorder安装与使用

    继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...

  6. hdu-1492 The number of divisors(约数) about Humble Numbers---因子数公式

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1492 题目大意: 给出一个数,因子只有2 3 5 7,求这个数的因子个数 解题思路: 直接求出指数即 ...

  7. SQL SERVER 2012断日志

    有一个SQL2012库的日志达到了100G左右,平时开发人员根本没有做过事务日志备份,而磁盘空间已经快满了.所以,只能截断它.但是,由于从2K8以后,SQL SERVER好像不再提供 truncate ...

  8. LA 3353 最优巴士线路设计

    给出一个 n 个点的有向图,找若干个圈,是的每个结点恰好属于一个圈.要求总长度尽量小. 三倍经验题 Uva 12264,HDU 1853 这题有两种解法,一是匹配: 每个点只在一个圈中,则他有唯一的前 ...

  9. UVA1184 Air Raid

    嘟嘟嘟 最小路径覆盖板子题. 建二分图,然后跑Dinic(因为我不会匈牙利),然后ans = n - maxflow(). 主要是发一下用链前存图的写法.(好像比vector短一点) #include ...

  10. POJ Widget Factory 【求解模线性方程】

    传送门:http://poj.org/problem?id=2947 Widget Factory Time Limit: 7000MS   Memory Limit: 65536K Total Su ...