容易忘记的 | 易学教程

localStorage

1.localStorage

(1)setItem(key , value)，保存或设置数据如果key已经存在，则覆盖key对应的value 如果不存在则添加key与value

　window.localStorage.setItem('name','xiao');

(2)getItem(key); 获取key对应的value。如果key不存在则返回null

window.localStorage.getItem('name');

(3)key(index); 获取指定下标位置的key

　window.localStorage.key(0);

(4)length 获取localStorage一共有多少条数据 alert(window.localStorage.length); 配合key(index)方法可以实现遍历localStorage数据的方法

(5)clear(); 将同域名下的所有localStorage数据都清空

(6)removeItem('key'): 删除数据，通过key来删除相应的value

2.JS新API

(1) document.querySelector("selector"); 选择器返回第一个匹配到的元素，如未匹配到返回null

(2)document.querySelectorAll("selector"); 选择器返回所有匹配到的元素，如未匹配到返回空数组

(3) document.getElementsByClassName("name"); 选择器返回所有匹配到的元素，如未匹配到返回空数组

支持： Chrome, FireFox, Safari, Opera, IE 8+

3.classList对象

在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的CSS类。

classList对象里有些很有用的方法：

　　length: 类名个数

　　item(index): 获取类名

　　add(): 添加类

　　remove(): 删除类

　　contains(): 判断类

　　toggle(): 反转类//有就删除，没有就添加

4.cookie

　document.cookie="user1=YY";

（1）设置cookie

function setCookie(key,Val,Days){
　　　　var dates=new Date();
　　　　dates.setDate(dates.getDate()+Days);
　　　　document.cookie=key+'='+escape(Val)+'; expires='+dates;
　　}

获取cookie
　

　function getCookie(key){
　　var cookies=document.cookie;//返回："user1=YY; user2=MM"　　　　var arr1=cookies.split('; ');
　　　　for (var i = 0; i < arr1.length; i++) {
　　　　　　var arr2=arr1[i].split('=');
　　　　　　if (arr2[0]==key) {
　　　　　　　　return unescape(arr2[1]);//解码
　　　　　　};
　　　　};
　　　　return false;
　　}
　　function rmCookie(key){//删除cookie
　　　　setCookie(key,'a',-3);
　　}

用escape( )函数进行编码，它能将一些特殊符号使用十六进制表示，从而可以存储于cookie值中当使用escape( )编码后，在取出值以后需要使用unescape( )进行解码才能得到原来的cookie值。

5.ajax

1.是什么？

　　AJAX = Asynchronous JavaScript And XML （ AJAX = 异步 JavaScript 和 XML）

　　AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

　　通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的

　　传统的网页（不使用 AJAX）如果需要更新内容，必需重新加载整个网页

2.优势

　　异步加载数据，无需切换页面

　　更佳的用户体验：局部刷新、及时验证、操作步骤简化等

　　节省流量

　　JS控制数据的加载，更加灵活多用

3.send（）

　　post请求需在send之前设置：

　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.JSON转换方法

　　在数据传输流程中，json是以文本即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键

　　（1）由JSON字符串转换为JSON对象　　

var str='{"name":"xiaoming","age":"21"}';   var obj=eval('('+str+')');  var obj1=JSON.parse(str);

　　　(2) 将JSON对象转化为JSON字符串

　var str1=JSON.stringify(obj1);

5.ajax

　xhr.open('get','test05.php?_='+new Date().getTime(),true); //生成不一样的url解决缓存问题

　xhr.open('get','test05.php?age='+ipt.value+'&_='+new Date().getTime(),true);

6.iframe标签

　　　　iframe元素会创建包含另外一个文档的内联框架

　　　常用属性：

　　　　frameborder属性规定是否显示框架周围的边框值：0/1

　　　　src属性规定要显示的文档的URL 可是：html、文本、ASP等

　　　　scrolling属性规定是否显示滚动条值：yes no auto

　<iframe frameborder=“0” src=“abc.html” scrolling=“auto”></iframe>

7.跨域

跨域可以简单的理解为从一个域名访问另一个域名，出于安全考虑，浏览器不允许这么做。

　　img、script、iframe等元素的src属性可以直接跨域请求资源

　　ajax跨域

　　　　ajax本身并不能跨域！

　　　　实现跨越的方式：

　　　　1.可以让服务器去别的网站获取内容然后返回页面

　　　　2.给页面的ajax一个url，ajax把这个url传给服务器，由服务器去访问跨域地址

　　 jsonp跨域

　　　　 jsonp就是利用script标签的跨域能力请求资源既然叫jsonp，显然目的还是json，而且是跨域获取

　　　　利用js创建一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，

　　　　让浏览器去获取最终获得一个类似这样的数据：

　　　　 callback({"name":"Jack","from":"加勒比海"});

　　　　callback是页面存在的回调方法，参数就是想得到的json 回调方法要遵从服务端的约定一般是用 callback 或者 cb

用jsonp做百度搜索

　<script>
　　　　var list=document.getElementById('list');
　　　　var ipt=document.getElementById('ipt');
　　　　var Script=null;
　　　　ipt.onkeyup=function(){
　　　　　　if (Script) {
　　　　　　　　document.body.removeChild(Script);
　　　　　　};
　　　　　　Script=document.createElement('script');
　　　　　　Script.src='http://suggestion.baidu.com/su?wd='+ipt.value+'&cb=mycallback&t='+new Date().getTime();
　　　　　　document.body.appendChild(Script);
　　　　}
　　　function mycallback(json){
　　　　list.innerHTML='';
　　　　for (var i = 0; i < json.s.length; i++) {
　　　　　　list.innerHTML+='<li>'+json.s[i]+'</li>';
　　　　}
　　}
　　</script>

来源：https://www.cnblogs.com/SunShineM/p/6039536.html

标签

localstorage