今天接到一个任务，说是让自动调节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. 采用C/C++语言如何实现复数抽象数据类型Complex

    记录一下! 采用C/C++语言如何实现复数抽象数据类型Complex #include <stdio.h> typedef struct Complex { double e1; // 实 ...

  2. IOS Google语音识别更新啦！！！

      旧版本的API:   —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别.  API地址:http://www.google.com/speech-api ...

  3. Azure进阶攻略丨Azure网络通不通，PsPing&PaPing告诉你答案

    很多时候,为了解决一些问题,要查各种文档,很麻烦你造吗!做「伸手党」又容易被鄙视,这时候就需要用到[Azure 进阶攻略]啦!特此,我们推出关于 Azure 常用操作指南的系列文章,每篇涉及一个 Az ...

  4. solidity语言13

    函数过载 合约内允许定义同名函数,但是输入参数不一致 pragma solidity ^0.4.17; contract A { function f(uint _in) public pure re ...

  5. HCNA－RIP定时器

    1.拓扑图 2. 1.RIP有哪些定时器?三种:更新定时器.老化定时器.垃圾回收定时器 2.RIP的定时器有哪些作用?更新定时器(30s):运行RIP的路由器会以30s为周期,向邻居发送RIP路由.老 ...

  6. Computer Hardware

    Computer Hardware Para 1 Computer hardware can be divides into four categories: input hardware, stor ...

  7. 【BZOJ4766】文艺计算姬（prufer序列）

    点此看题面 大致题意: 让你求一个两边各有\(n\)和\(m\)个点的完全二分图有多少个生成树. \(prufer\)序列 这是一道比较经典的利用\(prufer\)序列结论求解答案的计数题. 大致思 ...

  8. BZOJ3680:吊打XXX(模拟退火)

    Description gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将 n个gty吊在n根绳子上,每根绳子穿过天台的一个 ...

  9. 什么是微信小程序

    官方给的说法是: 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 总结发现有这么几点: 1.免安装(不需要单独安装,是依托微 ...

  10. maven项目 servlet jar包冲突

    Failed to process JAR found at URL  for ServletContainerInitializers for context with name [{1}] 启动报 ...