HTML5存储
html5存储和cookie区别
1.cookie存储在浏览器下，html5存储在磁盘中
2.cookie在服务端发送，html5在客户端使用
3.cookie需要联网使用，html5可以不用网络
4.cookie最多存储4kb，html5看磁盘大小
5.cookie有时间周期，到时间会自动删除，html5除非手动删除，否则一直存在
cookie存储
cookie用来存储页面的值，一个网站共享一套cookie，cookie并不是浏览器提供的，是由程序员自己创建的，一个文件大小不得超过4kb，每个网站能存储20个左右，在一定期限内cookie会过期
操作
document.cookie设置或返回cookie
注意:如果cookie不给设置时间，则浏览器关闭会消失
时间属性expires是固定的，用日期类型定义
自己封装cookie操作方法
function getcookie(attr){//查询
var cok=document.cookie
var arr=cok.split(";")
for(var i=0;i<arr.length;i++){
var x=arr[i].split("=")
if(x[0].trim()==attr){
return x[1]
}
}
}
function setcookie(attr,value,time){//添加修改
document.cookie==attr+"="+value+";expires="+time
}
function delcookie(attr){//删除
var t=new Date()
t.setDate(t.getDate()-1)
document.cookie=attr+"=;expires="+t
}
cookie作用：登录状态，跟踪用户行为，定制页面，创建购物车
html5本地存储
sessionStorage:会话性存储，在浏览器关闭之后，数据会自动消失
localStorage：本地型存储，除非程序员手动删除，否则一直存在
属性和方法：
1.clear()清空数据
2.key()遍历数据
3.getltem(attr)获得数据
4.setItem(attr,value)设置属性值
下面是一个练习将三种方法全部做了一遍。
当选择记住我时，浏览器就会记住输入的用户名和密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" name="f1">
<p>用户名：<input type="text" name="user"></p>
<p>密码：<input type="password" name="pass"></p>
<p>
<input type="button" value="提交" class="btn">
<input type="checkbox" name="ch">记住我
</p>
</form>
<script>
var ch=f1.ch.value
var u=f1.user
var p=f1.pass
//第一种localStorage会一直保存
if(localStorage.getItem("user")){
u.value=localStorage.getItem("user")
p.value=localStorage.getItem("password")
f1.ch.checked=true
}
var btn=document.querySelector(".btn")
btn.οnclick=function(){
if(f1.ch.checked==false){
localStorage.clear()
}
else{
localStorage.setItem("user",u.value)
localStorage.setItem("password",p.value)
}
}
//第二种
//封装cookie
function getcookie(attr){//查询
var cok=document.cookie
var arr=cok.split(";")
for(var i=0;i<arr.length;i++){
var x=arr[i].split("=")
if(x[0].trim()==attr){
return x[1]
}
}
}
function setcookie(attr,value,time){//添加修改
document.cookie==attr+"="+value+";expires="+time
}
function delcookie(attr){//删除
var t=new Date()
t.setDate(t.getDate()-1)
document.cookie=attr+"=;expires="+t
}
if(getcookie("user")){
u.value=getcookie("user")
p.value=getcookie("password")
f1.ch.checked=true
}
var btn=document.querySelector(".btn")
btn.οnclick=function(){
if(f1.ch.checked==false){
delcooki("user")
delcooki("password")
}
else{
var t=new Date()
t.setDate(t.getDate()+1)
setcookie("user",u.value)
setcookie("password",p.value)
}
}
//第三种sessionStorage不关闭浏览器不清空，关闭就清空
if(sessionStorage.getItem("user")){
u.value=sessionStorage.getItem("user")
p.value=sessionStorage.getItem("password")
f1.ch.checked=true
}
var btn=document.querySelector(".btn")
btn.οnclick=function(){
if(f1.ch.checked==false){
sessionStorage.clear()
}
else{
sessionStorage.setItem("user",u.value)
sessionStorage.setItem("password",p.value)
}
}
</script>
</body>
</html>
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
