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

  1. <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;
            }
  2.  
  3.     </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>
  4.  
  5. <script src="jquery-1.11.3.js"></script>
    <script>
  6.  
  7.     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>
  8.  
  9. </body>
    </html>
  10.  
  11. 有时间可以关注一下我的博客，有好的意见也希望大家多交流，技术在于讨论中进步：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. SharePoint 2013 - Callout

    1. 没有OOTB的方法对Callout进行修改,Callout可以使用在以下范围: Document Library Assert Library Images Library Pages Libr ...

  2. JSP初学者2

    <jsp:useBean id="name" class="classname" scope="page|request|session|app ...

  3. Fiddler-修改HTTP请求参数

    在进行 App 测试时,经常需要修改请求参数,以获得不同的显示效果,以查看相应的页面显示处理.例如:可以通过修改 HTTP请求 的参数,来获取不同的响应结果. 下面以修改 HTTP请求的商品系统编号为 ...

  4. EJB是什么？

    1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...

  5. 【Leetcode】【Easy】Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  6. Oracle 11.1.0.6 导入导出bug

    实验环境: 11.1.0.6.0   对ANONYMOUSUSER_ALL表中分区进行备份 SQL> select TABLE_NAME,PARTITION_NAME,HIGH_VALUE,PA ...

  7. ZT 自定义operator new与operator delete的使用（1）

    http://blog.csdn.net/waken_ma/article/details/4004972 先转两篇文章: 拨开自定义operator new与operator delete的迷雾 C ...

  8. NO.006-2018.02.11《卜算子·我住长江头》宋代：李之仪

    卜算子·我住长江头_古诗文网(bǔ) 卜算子·我住长江头 宋代:李之仪 我住长江头,君住长江尾.日日思君不见君,共饮长江水. 我居住在长江上游,你居住在长江下游. 天天想念你却见不到你,共同喝着长江的 ...

  9. Uva 10559 消除方块

    题意: 每次可以选择一个区间(连续相同的序列)消除,得分为 len*len:问最大得分. 分析: 很容易想到是区间DP,但是不像普通的区间DP一样切割方式~~~ 如果定义 d[ i ][ j ] 区间 ...

  10. HDU 5675 智慧数

    题意:给一个n ,能否找到正整数x,y使得 x^2 -y^2 = n: 分析:打表可以找出规律,3,5,7,9....,8,12,16,20..... 和奇数,4的倍数有关. 数学证明: