本地数据数据存储：cookie、localStorage、sessionStorage

1-0 cookie的定义

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息"。cookie菜鸟教程

1-A 调取cookie

/* document.cookie */
var x = document.cookie;

1-B 服务器端设置

/* set-cookie */
Set-Cookie:locale="";Expires=Fri,31-Jan-2025 02:45:35 GMT;Path=/
Set-Cookie:Coremail.sid='';Path=/
Set-Cookie:

1-C 属性

属性名	默认值	作用
Name	无	名
Value	无	值
Domain	当前文档域	作用域
Path	当前文档路径	作用路径
Expires/Max-Age	浏览器会话时间	失效时间
Secure	false	http协议时生效

1-D 作用域

/* domain */
domain:.163.com
path:/
//上面的Cookie可以作用于news.163.com，也可以作用于sports.163.com

domain:news.163.com
path:/
//上面的cookie只能作用于news.163.com，

domain:sports.163.com
path:/
//上面的cookie只能作用于sports.163.com，

1-E 作用路径

/* path */
domain:www.163.com
path:/
//上面的cookie既能作用于www.163.com/a,也能作用于www.163.com/b

domain:www.163.com
path:/a
//上面的cookie只能作用于www.163.com/a

domain:www.163.com
path:/b
//上面的cookie只能作用于www.163.com/b

1-F 设置、修改、删除

/*读取*/
/* function getcookie() */
function getcookie(){
    var cookie = {};
    var all = document.cookie;
    if(all === '') {
        return cookie;
    }
    var list = all.split('; ');
    for(var i=0;i<list.length;i++){
        var item = list[i];
        var p = item.indexOf('=');
        var name = item.substring(0,p);
        name = decodeURIComponent(name);
        var value = item.substring(p+1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

/*设置、修改*/
document.cookie = 'name=value';
/* function setCookie() */
function setCookie(name,value,expires,path,domain,secure){
    var cookie = encodeURIComponent(name)+'='+encodeURIComponent(value);
    if(expires){
        cookie += '; expires=' +expires.toGMTString();
    }
    if(path){
        cookie += '; path=' +path;
    }
    if(domain){
        cookie += '; domain=' +domain;
    }
    if(secure){
        cookie += '; secure=' +secure;
    }
    document.cookie = cookie;
}

/*删除*/
/* function removeCookie() */
function removeCookie(name,path,domain){
    document.cookie = name + '='
    +'; path='+path
    +'; domain='+domain
    +'; max-age=0';
}

1-G 实例

/*html*/
<input type="text" name="" id="text">
<input type="button" id="btn1" name="" value="button">
<input type="button" id="btn2" name="" value="button">
<input type="button" id="btn3" name="" value="button">
<div id="ajaxbox"></div>

/*js*/
var btn1 = document.getElementById('btn1');
var btn1 = document.getElementById('btn1');
var btn1 = document.getElementById('btn1');
var text = document.getElementById('text');
var ajaxbox = document.getElementById('ajaxbox');
var value = 'zhangsan';
text.addEventListener('blur',function(e){value = e.target.value;},false);
btn1.addEventListener('click',function(){setCookie('username',value)},false);
btn2.addEventListener('click',function(){if(getCookie().username){ajaxbox.innerHTML=getCookie().username}},false);
btn3.addEventListener('click',function(){removeCookie('username','/','/')},false);

1-H 缺点

流量代价
安全性问题
大小限制

2 Storage

2-0 Storage定义

Storage是HTML5引入的一个在客户端存储数据的方案,不同的浏览器设置不同大概可以存储5MB。

2-A 根据有效时间分类

Storage根据有效时间分为：localStorage和sessionStorage

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2-B 作用域

localStorage-->[协议，主机名，端口]

sessionStorage-->[窗口，协议，主机名，端口]

2-C storage对象的读取、添加/修改、删除

//读取
localStorage.name
//添加-修改
localStorage.name = "string"
//删除
delete localStorage.name

2-D API

//获取键值对的数量
localStorage.length
//读取
localStorage.getItem("name")
localStorage.key(i)
//添加-修改
localStorage.setItem("name","value")
//删除对应键值
localStorage.removeItem("name")
//删除所有数据
localStorage.clear()

2-E storage应用案例

storage通讯录

/* storage通讯录 */
/* 通讯录html面板 */
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>HTML5本地存储之Web Storage篇</title> 
</head> 
<body> 
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;"> 
        <label for="user_name">姓名：</label> 
        <input type="text" id="user_name" name="user_name" class="text"/> 
        <br/> 
        <label for="mobilephone">手机：</label> 
        <input type="text" id="mobilephone" name="mobilephone"/> 
        <br/> 
        <input type="button" onclick="save()" value="新增记录"/> 
        <hr/> 
        <label for="search_phone">输入手机号：</label> 
        <input type="text" id="search_phone" name="search_phone"/> 
        <input type="button" onclick="find()" value="查找机主"/> 
        <p id="find_result"><br/></p> 
    </div> 
    <br/> 
    <div id="list"></div> 
</body> 
</html> 

/* 保存：电话、姓名 */
//保存数据 
function save(){ 
    var mobilephone = document.getElementById("mobilephone").value; 
    var user_name = document.getElementById("user_name").value; 
    localStorage.setItem(mobilephone,user_name); 
} 
//查找数据 
function find(){ 
    var search_phone = document.getElementById("search_phone").value; 
    var name = localStorage.getItem(search_phone); 
    var find_result = document.getElementById("find_result"); 
    find_result.innerHTML = search_phone + "的机主是：" + name; 
} 
//将所有存储在localStorage中的对象提取出来，并展现到界面上 
function loadAll(){ 
    var list = document.getElementById("list"); 
    if(localStorage.length>0){ 
        var result = "<table border='1'>"; 
        result += "<tr><td>姓名</td><td>手机号码</td></tr>"; 
        for(var i=0;i<localStorage.length;i++){ 
            var mobilephone = localStorage.key(i); 
            var name = localStorage.getItem(mobilephone); 
            result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>"; 
        } 
        result += "</table>"; 
        list.innerHTML = result; 
    }else{ 
        list.innerHTML = "目前数据为空，赶紧开始加入联系人吧"; 
    } 
} 

/* 保存：姓名、电话、公司 */ 
//保存数据 
function save(){ 
    var contact = new Object; 
    contact.user_name = document.getElementById("user_name").value; 
    contact.mobilephone = document.getElementById("mobilephone").value; 
    contact.company = document.getElementById("company").value; 
    var str = JSON.stringify(contact); 
    localStorage.setItem(contact.mobilephone,str); 
    loadAll(); 
} 
//将所有存储在localStorage中的对象提取出来，并展现到界面上 
function loadAll(){ 
    var list = document.getElementById("list"); 
    if(localStorage.length>0){ 
        var result = "<table border='1'>"; 
        result += "<tr><td>姓名</td><td>手机</td><td>公司</td></tr>"; 
        for(var i=0;i<localStorage.length;i++){ 
            var mobilephone = localStorage.key(i); 
            var str = localStorage.getItem(mobilephone); 
            var contact = JSON.parse(str); 
            result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>"; 
        } 
        result += "</table>"; 
        list.innerHTML = result; 
    }else{ 
        list.innerHTML = "目前数据为空，赶紧开始加入联系人吧"; 
    } 
}

posted @ 2021-01-17 09:35 格一阅读(379) 评论(0) 收藏举报

刷新页面返回顶部

WebDev在路上

一刻，一天，一生。

本地数据数据存储：cookie、localStorage、sessionStorage

1-0 cookie的定义

1-A 调取cookie

1-B 服务器端设置

1-C 属性

1-D 作用域

1-E 作用路径

1-F 设置、修改、删除

1-G 实例

1-H 缺点

2 Storage

2-0 Storage定义

2-A 根据有效时间分类

2-B 作用域

2-C storage对象的读取、添加/修改、删除

2-D API

2-E storage应用案例

公告

WebDev在路上

一刻，一天，一生。

本地数据数据存储：cookie、localStorage、sessionStorage

1 cookie

1-0 cookie的定义

1-A 调取cookie

1-B 服务器端设置

1-C 属性

1-D 作用域

1-E 作用路径

1-F 设置、修改、删除

1-G 实例

1-H 缺点

2 Storage

2-0 Storage定义

2-A 根据有效时间分类

2-B 作用域

2-C storage对象的读取、添加/修改、删除

2-D API

2-E storage应用案例

公告