今天接到一个任务，说是让自动调节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. 【数据库】6.0 MySQL入门学习（六）——MySQL启动与停止、官方手册、文档查询

    1.0 MySQL主要有四种启动方式:直接启动.安全启动.服务启动.多实例启动. 直接启动: 服务器启动: 安全启动(最常用): 多实例启动: 2.0如何获得MySQL帮助 2.1官方手册 下面提供百 ...

  2. ERP设计之系统基础管理(BS)-日志模块设计(转载)

    原文地址:8.ERP设计之系统基础管理(BS)-日志模块设计作者:ShareERP 日志模块基本要素包括: 用户会话.登录.注销.模块加载/卸载.数据操作(增/删/改/审/弃/关等等).数据恢复.日志 ...

  3. CSS样式编写案例

    1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位 步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位 步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...

  4. PHP time() date() strtotime()日期函数总结

    日期函数总结—— 一.返回时间戳——若整体数值超出计算机能力范围,返回空. 1. time();返回当前的 Unix 时间戳  例:$a=time(); var_dump($a); //输出:int( ...

  5. 一个C#面试问题，要求是将字符串中重复字符从第二个开始都去掉，空格除外。然后显示的时候，从后往前显示。

    因为C#的code,感觉实现这个还是比较容易,只是SB.所以,在面试时候,以为不会这么容易,所以,我先试着用了Dictionary去实现,发现有困难.然后改回来用StringBuilder实现,这个因 ...

  6. 使用 richtextbox 输出程序运行信息

    private delegate void Refresh_CallBack(Color color,string text); private void ControlsRefresh(Color ...

  7. OpenSSL.Net 在生产环境中无法正常加载的原因分析与解决 z

    http://blog.csdn.net/wangjia184/article/details/6990098 http://www.openssl.org/ 在本地测试好好的代码部署到生产环境后,遇 ...

  8. Selenium2学习（八）-- 操作元素（键盘和鼠标事件）

    前言 在前面的几篇中重点介绍了一些元素的到位方法,到位到元素后,接下来就是需要操作元素了.本篇总结了web页面常用的一些操作元素方法,可以统称为行为事件 有些web界面的选项菜单需要鼠标悬停在某个元素 ...

  9. SpringMvc-helloword

    说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...

  10. UVALive 6261 Jewel heist

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