cookie用于存储在用户本地的一些数据 , 存储大小4k 条数在170左右 ,可设置过期时间。
// 增加
document.cookie = "username=admin";
document.cookie = "password=abc";
// 更改,同名替换
document.cookie = "username=mmh";
// 查
let dc = document.cookie;
console.log(dc);
// password=abc; username=mmh
// 对整个结果字符串进行分离
let arr = dc.split("; ");
for(let i=0 ; i<arr.length ; i++){
// 再对每个cookie语句进行分离
let arr1 = arr[i].split("=");
if(arr1[0] == "username"){
console.log(arr1[1]);
}
}
// 删
let oDate = new Date();
// 设置过期时间,为当前时间的之前任意时间段
oDate.setDate(oDate.getDate()+1);
document.cookie = "username=mmh;expires="+oDate;
能够像localStorage一样,方便的进行增删改查。
//设置添加或者修改cookie的方法(无则添加,有则替换)
function setCookie(name, val, num) {
let oDate = new Date();
oDate.setDate(oDate.getDate() + num);
document.cookie = name + "=" + val + ";expires=" + oDate;
}
//获取cookie,通过cookie名
function getCookie(name) {
let str = document.cookie;
let arr = str.split("; ");
for(let i = 0; i < arr.length; i++) {
let arr1 = arr[i].split("=");
if(arr1[0] == name) {
return arr1[1];
}
// 如果该属性不存在cookie中,则返回undefined
}
}
//删除cookie
function removeCookie(name) {
setCookie(name, 1, -1);
}
是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。
通过异步模式,提升了用户体验。优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载。
Ajax最大的特点就是局部刷新。
//get post 是否向服务器(后台接口)传数据
/*
* type:get/post
* url:资源路径(接口地址)
* data:前端给后台的数据{key1:value1,key2:value2} => key1=value1&key2=value2
* cb:前端接收到数据之后的处理函数
* */
function ajax(obj){
// 处理数据参数
var str = "";
for(var i in obj.data){
str+=i+"="+obj.data[i]+"&";
}
// 去掉结尾的$符号
str = str.replace(/&$/,"");
// 1 、 创建Ajax对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、 准备工作及发送请求
if(obj.type.toUpperCase()==="GET"){
if(str==""){
xhr.open("GET",obj.url,true);
}else{
xhr.open("GET",obj.url+"?"+str,true);
}
xhr.send();
}
if(obj.type.toUpperCase()==="POST"){
xhr.open("POST",obj.url,true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(str);
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
obj.cb(data);
}
}
}
}
1、HTML
<input type="text" id="" />
<ul>
</ul>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oUl = document.querySelectorAll("ul")[0];
var oInput = document.querySelectorAll("input")[0];
oInput.oninput = function(){
let data = {val:this.value};
ajax({
type:"GET",
url:"index.php",
data:data,
cb:foo
});
function foo(data){
console.log(data);
let data1 = JSON.parse(data);
let str = "";
data1.forEach((item)=>{
str += `<li>${item}</li>`;
});
oUl.innerHTML = str;
}
}
</script>
2、PHP
<?php
$val = $_GET["val"];
$arr = ["a","aa","aaa","aaaa","aaaaa","aaaaaa"];
$newArr = [];
foreach($arr as $item){
if($val == substr($item,0,strlen($val))){
array_push($newArr,$item);
}
}
echo json_encode($newArr);
/*var_dump($_GET);*/
// 得到的是数组
?>
1、HTML结构
<ul id="newsList">
</ul>
<ul id="pages">
<li>首页</li><li>上一页</li><li class="pageNum"></li><li>下一页</li><li>尾页</li>
</ul>
2、CSS结构
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
li{
list-style: none;
}
#newsList{
width: 500px;
border: 1px solid #CECECE;
}
#newsList li{
height: 36px;
line-height: 36px;
padding: 0 8px;
margin: 0 10px;
border-bottom: 1px solid #CECECE;
}
#newsList li:last-child{
border-bottom: none;
}
#pages li{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid red;
cursor: pointer;
}
#pages li span{
display: inline-block;
padding: 10px;
margin: 0 10px;
border: 1px solid red;
cursor: pointer;
}
#pages .pageNum{
border: none;
padding: 0;
}
</style>
3、JS结构
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//正常来讲,分页是后端实现,前端只需传参数即可 page=1&nums=5
//先把所有的数据取到,根据限定每页条数,得到有多少页
let oList = document.getElementById("newsList");
let oPages = document.getElementById("pages");
let aBtns = oPages.children;
let oPageNum = document.querySelectorAll(".pageNum")[0];
ajax("data.json",function(data){
data = JSON.parse(data);
let totalNums = data.length;
let numPerPage = 5;
let pages = Math.ceil(totalNums/numPerPage);
let curIndex = 0;
let str = "";
for(let i = 0; i < pages; i++){
str += `<span>${i+1}</span>`;
}
oPageNum.innerHTML = str;
function show(num){
let str1 = "";
for(let i = numPerPage*num; i < Math.min(totalNums,numPerPage*(num+1)); i++){
str1 += `<li>${data[i]}</li>`;
}
oList.innerHTML = str1;
}
show(curIndex);
//首页
aBtns[0].onclick = function(){
curIndex = 0;
show(curIndex);
}
//上一页
aBtns[1].onclick = function(){
curIndex--;
if(curIndex<0){
curIndex=0;
}
show(curIndex);
}
//下一页
aBtns[aBtns.length-2].onclick = function(){
curIndex++;
if(curIndex>pages-1){
curIndex = pages-1;
}
show(curIndex);
}
//尾页
aBtns[aBtns.length-1].onclick = function(){
curIndex = pages-1;
show(curIndex);
}
//具体的页码
let aNums = oPageNum.children;
for(let i = 0; i < aNums.length; i++){
aNums[i].onclick = function(){
curIndex = i;
show(curIndex);
}
}
})
</script>