localStorage、sessionStorage和cookie的区别和使用

一、localStorage

　　用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；

　　一般最大可存储5M数据，并且支持跨域隔离，localStorage满了的情况下仍继续存储并不会覆盖其他的值，而是直接报错(QuotaExceededError)，并且当前存储的值也会被清空。

　　保存数据语法：

localStorage.setItem("key", "value");

　　读取数据语法：

var lastname = localStorage.getItem("key");

　　删除数据语法：

localStorage.removeItem("key");

　　删除所有数据：

localStorage.clear();

 

另外一种保存、读取和删除的方法：

// 保存
localStorage.name = 'lj';
// 读取
localStorage.name; // lj
// 删除
delete localStorage.name;
// 清除全部
localStorage.clear();

// 遍历
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i); // 获取本地存储的Key
    console.log(localStorage[key]); // 获取本地存储的value
}

二、sessionStorage

　　该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

　　假设你在A页面存储了sessionStorage，新开选项卡将A页面的链接粘贴进去打开页面，sessionStorage也是不存在的。

所以sessionStorage存在的条件是页面间的跳转，A页面存储了sessionStorage，他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。

　　保存、读取和删除的方法同localStorage的用法

三、cookie

　　cookie在设置的时候如果不设置过期时间，就表示是个会话cookie，

　　Cookie 是一些数据, 存储于你电脑上的文本文件中。

　　当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

　　Cookie 的作用就是用于解决 "如何记录客户端的用户信息"。

　　/*描述:

　　新建一条Cookie,交由浏览器管理!

　　参数说明:

　　name - 键值对的键,唯一标记一个值

　　value - 键值对的值,cookie存储的内容

　　expdays - cookie过期时间(有效时间)

　　*/

 //添加cookie
function setCookie(name, value, expdays) {
    var expdate = new Date(); //设置Cookie过期日期
    expdate.setDate(expdate.getDate() + expdays); //添加Cookie
    document.cookie = name + "=" + escape(value) + ";expires=" + expdate.toUTCString();
}


// 获取cookie
function getCookie(name) { //获取name在Cookie中起止位置
    var start = document.cookie.indexOf(name + "=");
    if (start != -1) {
        start = start + name.length + 1; //获取value的终止位置
        var end = document.cookie.indexOf(";", start);
        if (end == -1) end = document.cookie.length; //截获cookie的value值,并返回
        return unescape(document.cookie.substring(start, end));
    }
    return "";
}


//删除cookie
function delCookie(name) {
    setCookie(name, "", -1);
}