今天接到一个任务，说是让自动调节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. Javascript 自定义输出

    缘由 前段时间再看了一些javascript的学习资料,也写的一些demo,在输出的时候一般都用alert,但这个方法会打断函数运行,用起来不是很好.还有就是console.log这个方法,这种方法原 ...

  2. Java的输入/输出操作

    Java的输入\输出机制 计算机的基本功能就是通过输入输出设备与外部其他设备尽心数据的交互,从其他设备读入数据叫做输入操作,将计算机内的数据写入到其他设备叫做输出操作.可以向计算机发送数据.又可以接受 ...

  3. 在Eclipse安装Genymotion插件的经验心得

    个人心得分享,不当之处还请指正. Eclipse自带的Android模拟器已经无力吐槽了,新手刚上手时或许配置完环境已经精疲力尽了,或许还沉浸在开发成功的喜悦当中,对AVD模拟器的运行情况关注不大,渐 ...

  4. libcurl 中使用curl_multi_perform()函数执行订阅类型url的问题

    前提概要 当需要同时处理多个url时,可采用curl_multi_perform方式执行,如下代码1: //初始化一个multi curl 对象 CURLM * curl_m = curl_multi ...

  5. Oracle VM virtualBox -Centos6.4 安装后没有网解决方法

    1.先修改Oracle VM virtualBox 的网络配置 2.然后启动centos输入:  dhclient eth0 3.然后如果没报错的话  输入: ifconfig  就可以查看到ip地址 ...

  6. vue-cli3 项目从搭建优化到docker部署

    项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art 1. 创建一个vue项目 相信大部分人 ...

  7. 如何使用Kubernetes的configmap通过环境变量注入到pod里

    在Kubernetes官网里,有这样一篇文章,提到了Kubernetes里的一个最佳实践就是把应用代码同配置信息分开,一种方式就是使用Kubernetes 1.2里引入的configmap概念. ht ...

  8. Jmeter入门15 JSON Assertion 适用于json格式的响应断言

    当响应结果是json格式时,用JSON Assertion更方便判断. 1 在请求上右键添加json断言 2  编辑json Assertion 判断方式: 如果响应结果不是json格式的,fail ...

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

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

  10. Android——Intent,Bundle

    Intent——切换activity intent.setClass(first.this,second.class); startActivity(intent); Bundle——切换时数据传递 ...