一、localStorage使用 参考链接:https://www.cnblogs.com/st-leslie/p/5617130.html
1.localStorage写入数据,三种方法
var storage=window.localStorage; #需要先定义一个storage对象 //方法一:写入a字段 storage["a"]=1; //方法二:写入b字段 storage.b=1; //方法三:写入c字段 storage.setItem("c",3); #一般使用这个写入 console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]);
注意:localStorage使用的也是遵循同源策略,所以不同的网站不能共用相同的localStorage,localStorage只支持string类型的存储。
2.localStorage读取数据三种方法
//第一种方法读取 var a=storage.a; console.log(a); //第二种方法读取 var b=storage["b"]; console.log(b); //第三种方法读取 var c=storage.getItem("c"); #一般使用这个读取 console.log(c);
3.localStorage修改数据
就是获取到数据然后重新赋值
storage.a=4;
4.localStorage删除数据
1.将localStorage的所有内容删除
storage.clear();
2.将localStorage的某个键值对删除
storage.removeItem("a");
5.localStorage的键获取
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); } 使用key()方法,向其中出入索引即可获取对应的键
二、val()和text()取值的区别
text()返回所有匹配元素(如p、div等)的组合文本内容。val()用于获取输入元素的值(例如输入、选择等)
$("#drop").val() #获取文本内容 $("#drop").text("设置内容") #设置文本内容 $("#drop").attr("title") #获取属性title的值
三、通过js将html文档加入到页面中(js append方法)
1、静态界面当中: <div id="test"></div> 2、在js当中写入 $("#test").append(html文档内容): html文档即你要写入的内容
代码示例:
#需要添加的html页面 " 前面需要加 \
var text = "<li role=\"presentation\" class=\"active\">" + "<a href=\"#home\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\">" + "tokenize" + "</a>" + "</li>"; $("#navbar").append(text);
#需要添加进html页面的数据,可以通过拼接的方式加入 var results = ‘‘; for (var i in result_token) { results += result_token[i] } var content = "<textarea class=\"form-control\" id=\"message-text\" style=\"height:350px\" class=\"tokenize\">" + results + "</textarea>"; $("#tab-content").append(content);
四、js(jquery)实时监听input输入框值的变化
使用jquery的input事件
$("#input1").on("input propertychange",function(){ console.log($("#input1").val()) });
jquery事件绑定:on()/bind()/delegate(),在jq1.7版本之后是使用on() 事件绑定就是在被选元素上添加一个或多个事件 上面的就是在input1上绑定input和propertychange事件 一、分清以下几个概念: onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好 onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。只有IE11以下浏览器支持此事件 oninput事件:此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
二、然后我们主要是结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。 oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,
不像 onchange 事件需要失去焦点才触发。不过oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的写法。
五、路径传参
项目中涉及到的几种路径传参
以下都是在视图函数获取数据: 1.通过路径传参:页面跳转路径/search?label=label_name #get请求能获取路径?后面的值,在浏览器上显示路由127.0.0.1:5000/search?label=肺 value = request.values["label"] #value="肺" 2.路径传参:视图函数上路径设置/label_detail/<string:label_name> #浏览器显示路由:127.0.0.1:5000/label_detail/肺癌 def label_detail(label_name): #label_name="肺癌" #通过路径将参数传入视图函数中 pass 3.通过ajax传递参数:json格式参数 在视图函数中通过value = request.get_data()获取ajax传递过来的参数data value = json.loads(value) #反序列化value 注意:在ajax中如果写了dataType:‘json‘,说明服务器返回给前端页面的数据是json格式 前端页面就需要返回json格式字符串,可以通过json.dumps() ajax的success接收的返回数据可以直接使用
六、真实环境代码提交流程
1.尽量做完一个功能就提交一次 2.如果不是在dev分支最好先切换到dev分支再提交:git checkout dev 3.提交之前先git pull,将本地代码更新到最新版本 4.提交:git add . git commit -m ‘提交信息‘ git push 将dev的代码合并到master提交代码流程 1.从dev切换到master:git checkout master 2.合并dev分支的代码:git merge dev 3.git push
localStorage使用、val()和text()取值的区别、通过js将html文档加入页面中、js(jquery)实时监听input输入框值的变化、路径传参、代码提交流程