JavaScript -- 数据存储

Posted 2020-11-20 adoctors

Cookie

Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。

一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。

即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。

Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。

所以Cookie会随HTTP请求在服务器与客户端之间来回传递。

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

Cookie 以名/值对形式存储，如下所示:

name=adoctors

使用 JavaScript 创建Cookie

document.cookie="name=adoctors";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="name=adoctors; expires=Thu, 18 Dec 2018 12:00:00 GMT";

使用 JavaScript 读取 Cookie

var x = document.cookie;

使用 JavaScript 修改 Cookie

在 javascript 中，修改 cookie 类似于创建 cookie，旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

为了使用方便，将方法封装如下：

function setCookie(name,val,day){
    var time=new Date();
    time.setTime(time.getTime()+day*24*60*60*1000);
    document.cookie=name+"="+val+";expires="+time.toGMTString();
}
function getCookie(name){
    var arr=document.cookie.split(";");
    for(var i=0;i<arr.length;i++){
        arr[i]=arr[i].replace(/^s*|s*$/,"");
        if(arr[i].indexOf(name+"=")==0){
            return arr[i].substring(name.length+1)
        }
    }
}
function clearAllCookie(){
    var str=document.cookie.match(/[^=;]+(?==)/g);
    for(var i=0;i<str.length;i++){
        str[i]=str[i].replace(/^s*|s*$/,"");
        document.cookie=str[i]+"=0;expires=Wed Jan 04 2000 15:45:56 GMT"
    }
}

Cookie的缺点主要集中于安全性于隐私保护，主要包括一下几点：

• Cookie可能被用户禁用
• 同一个页面被不同浏览器访问时，浏览器之间保存的Cookie是不能互相访问的
• 每个Cookie都是存在客户端硬盘上的文件，可能被删除
• Cookie安全性不够高，所有Cookie都是以纯文本的形式记录于文件中

sessionStorage & localStorage

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

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

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

如：

sessionStorage.setItem(‘bindingType‘,‘wechat‘);
sessionStorage.getItem(‘topicRes‘)

localStorage.setItem(‘province‘, JSON.stringify(res.data.data));
localStorage.getItem("province")

与Cookie相比的优势

• 不需要安装额外的插件
• 存储空间高达5MB(Cookie只有4kb)
• 操作简单

注意：任何格式存储是会自动被转换为字符串，所以读取时注意格式转换。