JavaScript入门 cookie/async/await Day28

什么是cookie

持久化存储本地数据的一种技术与域名有关

cookie特点

数据大小4K左右

数据条数50条

有效期 默认会话级别

与域名有关

在客户端与服务端间进行传输 

使用方式 

存储数据形式

'key = value ;key1 = value1 ;key2 = value2 ;' 

获取cookie

let cookie = document.cookie

保存cookie

document.cookie = 'key=value'

document.cookie = 'key=value;expires=标准日期时间'

document.cookie = 'name=jack' // 'name=jack'

document.cookie = 'age=18' // 'name=jack; age=18'

删除cookie

设置时间为当前时间之前

<h2>cookie技术</h2>
		<button class="get-cookie">获取</button>
		<button class="save-cookie">保存</button>
		<button class="delete-cookie">删除</button>
		<p></p>
		<script>
			const addCookiKBtn = document.querySelector('.get-cookie')
			const saveCookiKBtn = document.querySelector('.save-cookie')
			const deleteCookiKBtn = document.querySelector('.delete-cookie')
			const pEle = document.querySelector('p')
			//获取cookie
			addCookiKBtn.addEventListener('click', function () {
				console.log('document.cookie :', document.cookie)
                let value = getCookie('age')
				pEle.innerHTML = value  // name=jack; age=18
			})
			//保存cookie
			saveCookiKBtn.addEventListener('click', function () {
				document.cookie = 'name=jack'
				document.cookie = 'age=18'
                let currentTime = new Date()           
                // 保存1天 24*60*60*1000
                currentTime.setTime(currentTime.getTime() + 24*60*60*1000) 
                console.log(currentTime)
                document.cookie = `score=98;expires=${currentTime}`
				alert('保存成功')
			})
			//删除cookie
			deleteCookiKBtn.addEventListener('click', function () {
                removeCookie('name')
                // document.cookie = `score=98;expires=Fri Sep 23 2021 10:42:45 GMT+0800`
            })
		</script>

封装cookie工具函数

/**
 * 保存cookie
 * @param {*} key
 * @param {*} value
 * @param {*} expires 有效时间 单位毫米
 */
function setCookie(key, value, expires) {
	let time = new Date()
	// time.setTime(time.getTime() + expires)
	time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + expires)
	document.cookie = `${key}=${value};expires=${time}`
}
/**
 * 获取cookie
 * @param {*} key 
 */
function getCookie(key){
    let value = null
    let cookie = document.cookie // 'name=rose; age=18
    let arr = cookie.split(';') // ['name=rose',' age=18]
    //遍历数组
    for(let i = 0; i < arr.length; i++){
        let item = arr[i] // 'name=rose'   ' age=18'
        let itemArr = item.split('=') // ['name','rose]  [' age','18']
        if(itemArr[0].trim() == key){
            value = itemArr[1]
            break;
        }
    }
    return value
}
/**删除cookie*/
function removeCookie(key){
    setCookie(key,'',-1)
}

使用：

<h2>cookie技术</h2>
		<button class="get-cookie">获取</button>
		<button class="save-cookie">保存</button>
		<button class="delete-cookie">删除</button>
		<p></p>
        <script src="./cookieutil.js"></script>
		<script>
			const addCookiKBtn = document.querySelector('.get-cookie')
			const saveCookiKBtn = document.querySelector('.save-cookie')
			const deleteCookiKBtn = document.querySelector('.delete-cookie')
			const pEle = document.querySelector('p')
			//获取cookie
			addCookiKBtn.addEventListener('click', function () {
				console.log('document.cookie :', document.cookie)
                let value = getCookie('age')
				pEle.innerHTML = value  // name=jack; age=18
			})
			//保存cookie
			saveCookiKBtn.addEventListener('click', function () {
				// document.cookie = 'name=jack'
				document.cookie = 'age=18'
                setCookie('name','rose',24*60*60*1000)
				alert('保存成功')
			})
			//删除cookie
			deleteCookiKBtn.addEventListener('click', function () {
                removeCookie('name')
            })
		</script>

第三方cookie库使用-js.cookie

        <h2>cookie技术</h2>
		<button class="get-cookie">获取</button>
		<button class="save-cookie">保存</button>
		<button class="delete-cookie">删除</button>
		<p></p>
        <script src="./js.cookie.js"></script>
		<script>
			const addCookiKBtn = document.querySelector('.get-cookie')
			const saveCookiKBtn = document.querySelector('.save-cookie')
			const deleteCookiKBtn = document.querySelector('.delete-cookie')
			const pEle = document.querySelector('p')
			//获取cookie
			addCookiKBtn.addEventListener('click', function () {
				let value = Cookies.get('name') 
				pEle.innerHTML = value
			})
			//保存cookie
			saveCookiKBtn.addEventListener('click', function () {
                Cookies.set('name', 'jack', { expires: 1 }); //一天
				alert('保存成功')
			})
			//删除cookie
			deleteCookiKBtn.addEventListener('click', function () {
                Cookies.remove('name')
            })
		</script>

async/await

作用

实现异步编程, 让异步代码用同步的写法实现

        => 同步代码和异步代码

用法

await后面一定promise对象封装的异步任务

await代码是在async修饰的函数中

应用

<script src="./myajax.js"></script>
		<script>
			async function fun() {
				console.log('发起请求')
				try {
                      let res = await myPromise({ method: 'get', url: 'http://10.7.162.150:8089/api/shop/list' })//等待响应结束返回值再进行下一个，实现同步
                              console.log(res)
                              console.log('响应完成')
				} catch (error) {
                              console.log(error);
                        }
			}
			console.log('开始执行')
			fun()
			console.log('执行完成')
		</script>