本地存储的三种方案学习Cookie,Storage之localStorage和sessionStorage的相同与不同点

cookie是http协议下,服务端或者脚本可以维护客户端信息的一种方式。

Cookie是一段不超过4KB的小型文本数据,由一个名称(Name)、一个值(Value)和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

koa中cookie的使用

储存cookie的值

ctx.cookies.set(name, value, [options])

获取cookie的值

ctx.cookies.get(name, [options])

options常用设置

客户端Cookie

设置Cookie

document.cookie="key=value"

获取Cookie

document.cookie

返回值是当前域名下的所有cookie,并按照某种格式组织的字符串 :

key=value; key1=value1; ……keyn=valuen

封装Cookie

只是在原方法的基础上进行一些简单功能性的封装 将cookie更加的简单化

设置Cookie

可以直接进行调用函数来设置 cookie

//设置cookie方法
function setCookie(name,value,options={}){
    let cookieData = `${name}=${value};`;
    for(let key in options){
        let str = `${key}=${options[key]};`;
        cookieData += str;
    }
    document.cookie = cookieData;
}

获取Cookie

我们有时候需要获取指定名称的cookie值就可以用这个直接进行获取 会更加的方便

//获取cookie方法;
function getCookie(name){
    let arr = document.cookie.split("; ");
    for(let i =0;i<arr.length;i++){
        let arr2 = arr[i].split("=");
        if(arr2[0]==name){
            return arr2[1];
        }
    }
    return "";
}

本地缓存Storage

本地缓存有两种 分别为 localStoragesessionStorage 但是两种的api是完全相同的 而且用起来也很简单 下面分别进行演示

localStorage

设置

这里需要传递两个参数

 localStorage.setItem("test","测试文字");

读取

参数需要传递一个键名

返回 键名对应的值。

如果键名不存在于存储中,则返回 null

let value = localStorage.getItem("test")

清除

传递你想要移除的键名

 localStorage.removeItem("test");

清除所有

调用它可以清空存储对象里所有的键值。

localStorage.clear();

获取指定索引

接受一个数值 n 作为参数,返回存储对象第 n 个数据项的键名

键的存储顺序是由用户代理定义的

所以尽可能不要依赖这个方法

var aKeyName = storage.key(key);

实例

function populateStorage() {
  localStorage.setItem('bgcolor', 'yellow');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'cats.png');

  localStorage.key(2); // 应该返回 'image'
}

sessionStorage

api方法与 localStorage 完全一样 只需要将 localStorage换成 sessionStorage

localStorage的设置api

localStorage.setItem("test","测试文字");

那么sessionStorage 的设置api 就是

sessionStorage.setItem("test","测试文字");

本地存储异同

共同点

localStorage和sessionStorage和cookie共同点

localStorage和sessionStorage共同点

不同点

localStorage

sessionStorage

cookie

资源下载

上一篇

Ajax,XMLHttpRequest,FormData学习进度条和上传速率的展示