今天接到一个任务，说是让自动调节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. Mac安装Gradle eclipse安装buildship插件

    一直用的eclipse+mvn,现在需要导入别人的gradle项目,所以下载了gradle和在eclipse中安装了buildship插件. 一,mac下安装gradle 1,点击网页https:// ...

  2. linux环境下 mysql数据库忘记密码 处理办法

    整个修改过程大概3-10分钟(看个人操作),这个时间内mysql出于不需要密码就能登陆的状态,请设法保证系统安全 不罗嗦直接上步骤 1.vi /etc/my.cnf 在[mysqld]下,添加一句:s ...

  3. SharePoint - Templates & Definitions

    1. <ListTemplate>元素的SecurityBits属性 Optional Text. Defines the item-level permissions in the li ...

  4. java 将long类型的数值转无符号数

    由于JAVA中基本数据类型均为有符号数,而且最大数据类型long为8字节假如long为负数时,最高位为1,转为无符号数时会超出long的取值范围,所以转换规则如下: 方法: public static ...

  5. HTML 5入门知识（一）

    了解HTML 5 HTML5 并非仅仅用来表示web内容,它的使命是将web带入一个成熟的应用平台,在这个平台上,视频.音频.图像.动画,以及与电脑的交互都被标准化. HTML 5概述 HTML 5实 ...

  6. Flask博客类登录注册验证模块代码(十四)

    1 文件系统 blog #博客类 App forms #表单 __init__.py user.py models #模型 __init__.py user.py static #静态文件 templ ...

  7. php 获取毫秒时间戳

    function getMsec(){//返回毫秒时间戳 $arr = explode(' ',microtime()); $hm = 0; foreach($arr as $v){ $hm += f ...

  8. ftp免交互上传文件脚本

    ftp -i -n <<! open .x.x.x user yourFtpAccount yourPasswd cd /root/DailyBuild/webapps/ delete x ...

  9. UVALive 6261 Jewel heist

    题意:珠宝大盗Arsen Lupin偷珠宝.在展厅内,每颗珠宝有个一个坐标为(xi,yi)和颜色ci. Arsen Lupin发明了一种设备,可以抓取平行x轴的一条线段下的所有珠宝而不触发警报, 唯一 ...

  10. C# .Net Framework4.5中配置和使用managedCUDA及常见问题解决办法

    主要参考英文帖子.我就不翻译了哈.很容易懂的. 先说明我的运行平台: 1.IDE:Visual Studio 2012 C# .Net Framework4.5,使用默认安装路径: 2.显卡类型:NV ...