设置cookie
< body>
< a href = "03-获取cookie.html" > 购物车页面< /a>
< script>
//怎么在浏览器里面存储一个cookie呢？
//cookie默认是会话级别的存储，浏览器关闭就自动清除了。说明cookie是存在过期时间
//注意点：存储cookie必须分开单个存储设置
// document.cookie = 'username=张三'
// document.cookie = 'password=123'
//怎么一次性设置多个cookie呢？使用数组存储
let list = [ { username:'张三' , password:123} , { username: '冯建炜' , password: 666 } , { username: '柯真宏' , password: 888 } ]
//先把数组转成json格式存储
document.cookie = ` cart = ${ JSON.stringify( list) } ` ( document.cookie)
< /script>
< /body>
获取cookie
< script>
//使用split( ) 方法把字符串进行分割，转成数组
let arr = document.cookie.split( '=' )
//把json转成js对象使用
console.log( JSON.parse( arr[ 1 ] ))
< /script>
cookie设置过期时间
let d = new Date( )
d.setDate( d.getDate( ) +2)
//console.log( d)
//把北京时间转成世界标准时间，没有时差了
d = d.toUTCString( )
//console.log( d)
document.cookie = ` a = 1 ; expires = ${ d} ` cookie路径
< h1 >< /h1 >< a href = "html/a.html" > 去a页面< /a>
< script>
//cookie访问规则：外层访问不了内层，内层可以访问外层
//设置路径 path = / 表示根路径
//document.cookie = 'name=哈哈'
console.log( document.cookie)
cookie转码
let d = new Date( )
d.setDate( d.getDate( ) +7)
d = d.toUTCString( )
document.cookie = ` username = ${ encodeURIComponent( '柯真宏' ) } ; expires = ${ d} ` ( decodeURIComponent( document.cookie))
cookie封装
< script>
/*
设置cookie
+ name表示cookie名称
+ value表示cookie值
+ time表示cookie过期时间
*/
function setCookie( name, value, time ) {
//判断有没有过期时间
if( time) {
//设置过期时间
let d = new Date( )
d.setDate( d.getDate( ) + time )
//把北京时间转成世界标准时间
d = d.toUTCString( )
document.cookie = ` ${ name} = ${ value} ; expires = ${ d} ; path = /` } else{
document.cookie = ` ${ name} = ${ value} ; path = /` }
}
setCookie( 'username' , '张三' , 7 )
setCookie( 'password' , '123' )
/*
获取cookie
+ name表示cookie名称
*/
function getCookie( name) {
//把获取到的cookie切割成数组形式
let arr = document.cookie.split( '; ' )
//声明一个空对象
let obj = { }
//遍历数组
arr.forEach( function( item) {
/*第一次遍历：username= 张三 第二次遍历：password= 123 */
let newArr = item.split( '=' )
//把值对应放在对象里面
obj[ newArr[ 0 ] ] = newArr[ 1 ]
} )
//把结果返回给外界
return obj[ name]
}
// let res = getCookie( 'password' )
// console.log( res)
/*
删除cookie
+ name表示cookie名称
+ 思路，把过期时间设置成负值
*/
function delCookie( name) {
setCookie( name, 1 , -1)
}
delCookie( 'username' )
delCookie( 'password' )
< /script>
七天免登陆
< style>
input{
display: block;
margin: 20px;
}
< /style>
< /head>
< body>
< form action = "09-index.html" >
< input type = "text" value = "" >
< input type = "password" value = "" >
< input type = "checkbox" >
< input type = "submit" value = "登陆" >
< /form>
< script src = "js/cookie.js" > < /script>
< script>
//获取元素
let user = document.querySelector( 'input[type=text]' )
let pass = document.querySelector( 'input[type=password]' )
let ckd = document.querySelector( 'input[type=checkbox]' )
let btn = document.querySelector( 'input[type=submit]' )
//免登陆逻辑：如果复选框是选中的状态，存储cookie，反之，删除cookie
ckd.onclick = function ( ) {
//使用变量保存复选框状态
let type = ckd.checked
//判断有没有选中
if( type) {
setCookie( 'username' , user.value, 7 )
setCookie( 'password' , pass.value, 7 )
setCookie( 'select' , type, 7 )
} else{
delCookie( 'username' )
delCookie( 'password' )
delCookie( 'select' )
}
}
//处理赋值操作
function getValue ( ) {
//判断有没有获取到cookie，如果没有获取到cookie，值默认是undefined
if( getCookie( 'username' ) == undefined || getCookie( 'password' ) == undefined) {
user.value = ''
pass.value = ''
} else{
//如果获取到了cookie的值，就给表单进行赋值操作
user.value = getCookie( 'username' )
pass.value = getCookie( 'password' )
ckd.checked = getCookie( 'select' )
}
}
getValue( )
//当表单框为空的时候，不能跳转。submit表单跳转属于浏览器默认行为
btn.onclick = function ( ) {
//判断表单是否为空
if( user.value == '' || pass.value == '' ) {
alert( '请输入内容' )
return false
} else{
setCookie( 'username' , user.value, 7 )
}
}
< /script>
另一页面
< style>
*{
margin: 0 ;
padding: 0 ;
}
header{
width: 100 %;
height: 40px;
background-color:
}
header div{
width: 80 %;
height: 100 %;
background-color: hotpink;
margin: 0 auto;
}
header div section{
width: 260px;
height: 100 %;
background-color: yellowgreen;
float: right;
text-align: center;
line-height: 40px;
font-size: 15px;
}
header div section a{
text-decoration: none;
color:
}
header div section b{
margin-left: 10px;
font-weight: normal;
cursor: pointer;
display: none;
float: left;
}
header div section span{
display: none;
float: left;
margin-left: 30px;
}
< /style>
< /head>
< body>
< header>
< div>
< section>
< a href = "08-7天免登陆.html" > 欢迎登陆< /a>
< span> 欢迎: 张三< /span>
< b> 退出< /b>
< /section>
< /div>
< /header>
< script src = "js/cookie.js" > < /script>
< script>
//获取元素
let a = document.querySelector( 'a' )
let span = document.querySelector( 'span' )
let b = document.querySelector( 'b' )
//判断有没有cookie
let user = getCookie( 'username' )
if( user) {
a.style.display = 'none'
b.style.display = 'block'
span.style.display = 'block'
span.innerHTML = ` 欢迎: ${ user} ` } else{
alert( '请去登陆' )
location.href = '08-7天免登陆.html'
}
//退出
b.onclick = function ( ) {
a.style.display = 'block'
b.style.display = 'none'
span.style.display = 'none'
delCookie( 'username' )
}
< /script>
协议
+ 约定，规则，规定了双方如何做某些事情
+ 协议，http（https）、ftp文件传输协议
网址
+ 协议
+ 域名
+ 端口号
http协议
+ 传输信息的时候，有三次握手
+ 无状态的协议，简单理解，你发送一次请求后，它给你回复后，再没有联系了
+ 页面和页面之间需要相互通信，这个页面登陆信息，其他的页面不知道，所以需要存储方式
cookie
+ 本地存储方式，大小4kb
+ 安全性不高
+ 不同域里面的cookie信息不能共享
+ document.cookie = ''
+ document.cookie
+ expires 过期时间
= > 因为系统或者cookie默认时间以世界标准时间为主的，如果直接设置默认以北京时间为标准的，所以需要进行转换
= > toUTCString( )
+ path = / 表示根目录，注意点：设置cookie的时候，要设置路径一起设置
localStorage
+ setItem( )
+ getItem( )
+ removeItem( )
+ clear( ) 慎用
加入购物车逻辑
+ 事件委派 target 需要做判断 nodeName 返回值是大写的标记名称
+ 获取点击按钮要拿到那条对应的数据
= > 通过自定义属性和数组里面的数据进行对比，find( ) ，直接返回对象
+ 存储数据之前，先看看购物车里面有没有数据
= > 存储数据，由于存储是多条数据，使用数组存储，无论是cookie还是localStorage都是需要转成json格式存储
= > JSON.parse( localStorage.getItem( 'cart' )) || [ ] 如果没有就返回空数组
+ 做判断，看localStorage里面有没有数据 list.length --> ! 0
= > 如果数组长度为0，说明没有数据，把对应的数据添加进list数组里面，并数据的数量赋值为1
+ 做判断，看localStorage里面有数据
= > 通过some( ) 方法看看list数组里面有没有重复的数据
= > 如果有，先找到对应数据的位置findIndex( ) ，然后把数据数量自增
= > 如果没有，把对应的数据添加进list数组里面，并数据的数量赋值为1
+ 把list数组存储进localStorage里面
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
