xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > Form表单的使用,使用LocalStorage实现Form表单内容本

Form表单的使用,使用LocalStorage实现Form表单内容本

发布时间:2019-05-11 10:30编辑:计算机尝试浏览(143)

    • 判断浏览器是或不是扶助localStorage,并将值存入,推荐setItem方法。

      1 if(!window.localStorage) { 二 console.log("浏览器不帮忙localstorage"); 3 return false; 四 }else{ 5 var storage=window.localStorage; 陆 // 查询条件localStorage本地存储 柒 var cfdaCode = $("#cfdaCode").val(); 八 var productCode = $("#productCode").val(); 玖 var approvalNumber = $("#approvalNumber").val(); 10 var status = $("#status").val(); 11 var productName = $("#productName").val(); 1二 var manufactureName = $("#manufactureName").val(); 13 storage.setItem("cfdaCode", cfdaCode); 1肆 storage.setItem("productCode", productCode); 1伍 storage.setItem("approvalNumber", approvalNumber); 1陆 storage.setItem("status", status); 一七 storage.setItem("productName", productName); 1八 storage.setItem("manufactureName", manufactureName); 1玖 }

    • 取出localStorage中的值,使用getItem方法。

      一 // 读取搜索条件localStorage 二 if(!window.localStorage){ 叁 console.log("浏览器不补助localstorage"); 四 }else{ 五 var storage = window.localStorage; 陆 var cfdaCode = storage.getItem("cfdaCode"); 七 var productCode = storage.getItem("productCode"); 捌 var approvalNumber = storage.getItem("approvalNumber"); 九 var status = storage.getItem("status"); 十 var productName = storage.getItem("productName"); 11 var manufactureName = storage.getItem("manufactureName"); 12 if (cfdaCode != null && cfdaCode != "") { 13 $("#cfdaCode").find("option[value='" cfdaCode "']").attr("selected",true); 14 } 15 $("#productCode").val(productCode); 16 $("#approvalNumber").val(approvalNumber); 17 if (status != null && status != "") { 18 $("#status").find("optionForm表单的使用,使用LocalStorage实现Form表单内容本地存储。[value='" status "']").attr("selected",true); 19 } 20 $("#productName").val(productName); 21 $("#manufactureName").val(manufactureName); 22 }

    • 清除localStorage中的值

      1 // 重置-清除localStorage 2 $("#reBtn").bind("click",function(){ 3 if(!window.localStorage){ 4 console.log("浏览器不帮忙localstorage"); 5 }else{ 6 storage.clear(); 柒 } 8 $("#cfdaCode").find("option:first").attr("selected",true); 玖 $("#productCode").val(""); 拾 $("#approvalNumber").val(""); 1一 $("#status").find("option:first").attr("selected",true); 1二 $("#productName").val(""); 一三 $("#manufactureName").val(""); 1四 });

    bwin必赢亚洲5566.com,在网址开辟进度中,总有部分看似记录用户喜好的数据必要保留在客户端,譬如记住用户名密码等。常规第二反响是应用cookie,可是cookie的运用有许多的界定。于是HTML伍正经中出来了LocalStorage,大小为5M。
    Angular二 关于LocalStorage的利用在github上稍稍例子,但基本上都以依靠2.0.* 或是beta版本的。小编用的是风靡版本Angular 二.一用持续,于是手动改了下。

    什么是Form表单?

    Form 表单是一组用来收罗用户输入音信的html 标签,能够对用户输入的新闻进行采访 效验和向服务器交由,从而完结用户与web 服务器的竞相。
    Form表单由<form>标签定义,只有标签内的零部件中的数据才会被交给到服务器。

    正文将举个例子介绍常见的html表单标签及运用方法
    末尾附上本人在github上的1个form实例源码

     参考:

    一、参考github项目:

    https://github.com/NilsHolger/angular2todoes
    
    https://github.com/rrgarciach/angular2-local-storage
    

    Form表单的主导构成

    表单则由HTMLFormElement类型,此成分承袭了HTMLElement,因此与别的HTML成分具有同等的默认属性;HTMLFormElement有友好以下属性和办法;

    acceptCharset: 服务器能够管理的字符集;等价于HTML中的accept-charset本性;
    action: 接收请求的U奇骏L,等价于HTML中的action
    elements: 表单中具备控件的会集.
    enctype: 请求的编码类型;等价于HTML中的enctype特性;
    length: 表单中央调控件的数目;
    method: 要发送的http请求类型,一般是get或然是post,等价于HTML中的method;
    name: 表单的名号;
    reset(): 将全部表单域复位为暗中认可值;
    submit(): 提交表单;会自行将享有具有name属性的html输入成分(包蕴input标签、button标签、select标签等)都将作为键值对交付。
    target:用于发送请求和接到响应的窗口名称;
    action 轻易的来说 正是呼吁url的相对路径
    须求的 action 属性规定当提交表单时,向何处发送表单数据。

    语法
    <form action="value">
    

    <input>

    输入标签,依据type属性的不等,表现出的功用也比不上。

    type = text 文本输入框,单行输入,用于提交文件。
    type = password 密码输入框,用于输入密码。
    type = checkbox 复选框,为浏览者提供多选输入方式。
    type = radio 单选框,为浏览者提供单选输入情势。
    type = "file" 上传文件,使浏览能够上传文件到服务器。
    type = "hidden" 定义二个隐藏字段,对用户不可知,能够作为一种隐身标识来作为辨别上传数据的实际的依据。
    type = "botton" 定义1个可点击的开关,自个儿未有任何表现,能够因此clickon( )属性来给按键加多各类成效。
    type = "submit" 提交开关,用于向服务器交由表单数据,数据会发送到action属性中的钦定分界面。
    type = "resist" 重新设置按键,会解决掉表单中的全部数据。

    1.form标签

    例子:<form action="result.php" method="post"></form>
    action 代表提交的指标地,
    method 能够选用提交的办法:get恐怕post(2者分别见文章:Form表单 · 问答篇中的难题二)
    装有的input标签都急需在form标签中,不然无法提交。

    若上传的是多媒体可能文件,必须在form标签中加多属性
    enctype="multipart/form-data"

     

    二、环境:

    Angular 2.1
    

    <textarea>

    文本域,提供多行文本输入格局,使浏览者能够输入大段的文书。
    <textarea>value</texarea>

    二.input 单行文本域

    事例:<input type="text" name="username" placeholder="请输入用户名">
    不无input标签name必填,不然提交后后台不能获取提交内容。
    placeholder 彰显提醒内容

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:Form表单的使用,使用LocalStorage实现Form表单内容本

    关键词: Web Angular... Angular 2 学习笔记 必赢国际bwin

上一篇:Tree实现细节分析,Tree的数据结构

下一篇:没有了