localstorage sessionstorage cookie 备忘

Posted 2020-08-05 韭菜茄子

/*
sessionStorage：
保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；

localStorage：
保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。

Cookie:
Cookie的内容会随着请求一并发送的服务器,容量小。

本地存储的有点：
减少网络流量，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少了不必要的数据请求，
减少数据在浏览器和服务器间不必要地来回传递。从本地读数据比通过网络从服务器获得数据快得多。
存储空间更大。
 */

//本地存储操作方法：
var sStorage=window.sessionStorage
var lStorage=window.localStorage
sStorage.setItem(‘name‘,‘zzn‘);//设置值
lStorage.setItem(‘sex‘,‘male‘);//设置值
console.info(sStorage.getItem(‘name‘))//获取值
console.info(lStorage.getItem(‘sex‘));//获取值
sStorage.removeItem(‘name‘,‘zzn‘);//清除某个键名对应的数据
lStorage.clear();//清除某个键名对应的数据
sStorage.clear();//clear方法用于清除所有保存的数据

//遍历操作:
sStorage.setItem(‘name‘,‘zzn‘);
sStorage.setItem(‘height‘,175);
for(var i=0;i<sStorage.length;i++){
    console.info(sStorage.key(i))//遍历获取键
    console.info(sStorage.getItem(sStorage.key(i)))//遍历获取值
}

//Cookie基础用法
document.cookie=‘username=leyi‘;
/*以上代码中‘username‘表示 cookie 名称，‘leyi‘表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；
如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。*/

//cookie的读取操作
document.cookie=‘username=leyi‘;
function getCookie(cookie_name){
    if(document.cookie.length>0){ //判断是否有cookie，没有就返回空
        cookie_name_start=document.cookie.indexOf(cookie_name);//因为name在最前面,如果有cookie则返回0
        if(cookie_name_start!=-1){
            first_equal_sign_index=cookie_name_start+cookie_name.length+1;//查找name值后的"="号的索引位置
            cookie_end=document.cookie.indexOf(‘;‘,first_equal_sign_index)//查找第一个分号的的索引位置
            if(cookie_end==-1){
                cookie_end=document.cookie.length;//如果cookie没有设置分号，比如document.cookie=‘name=value‘,那就直接获取整个字符串长度
                return unescape(document.cookie.substring(first_equal_sign_index,cookie_end))//截取第一个"="号到第一个";"号的字符串，即name对应的value值
            }
        }
    }
    return "";
}
console.info(getCookie("username"));

//设置cookie的有效期
document.cookie = "name=value;expires=date";

//设置cookie
function setCookie(cookie_name, cookie_value, expiredays){
　var date=new Date();
　date.setDate(date.getDate() + expiredays);
　document.cookie=cookie_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+date.toGMTString());
}
setCookie(‘num‘,123456,30);

//路径设置
//只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问
document.cookie = "name=value;expires=date;path=/";

//域设置
document.cookie = "name=value;path=path;domain=xx.com";

//安全设置
//把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。
//重要信息最后不放在cookie
document.cookie = "username=leyi;secure";