本地存储cookie、localStorage和sessionStorage示例详解

一：cookie

1.什么是cookie

cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作（设置、读取、删除）。

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。

会话跟踪技术：浏览器和服务器在进行多次请求间共享数据的过程，称为会话跟踪技术。

        每一个 HTTP 请求都会在请求头中携带 cookie 到服务端

        每一个 HTTP 响应都会在响应头中携带 cookie 到客户端

     也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据

我们只是需要设置一下 cookie 的内容就可以。

COOKIE 的存储形式

cookie 是以字符串的形式存储，在字符串中以 key=value 的形式出现

每一个 key=value 是一条数据

多个数据之间以 ; 分割

2.cookie的特点

1. 存储大小有限制，一般是 4 KB 左右

2. 数量有限制，一般是 50 条左右

3. 有时效性，也就是有过期时间，未设置的话是 会话级别（也就是浏览器关闭就过期了）

4. 有域名限制，在哪个域名下存储的cookie，只能在哪个域名下访问

3.cookie的作用

1.识别客户端

http是无状态协议。为了让服务器然能够识别客户端，客户端使用cookie，服务使用session。具体过程:当浏览器首次发送请求时，服务端会产生一个唯一的编号 (sessionld) 。响应时，把编号(sessionld) 发给浏览器端，浏览器端把接收到sessionld保存在cookie里。下次请求时，把sessionld携带上。服务器根据携带的sessionld，就能区分不同的客户端。（这个过程不需要我们写任何代码）

2.保存数据

• cookie可以在客户端保存数据
• cookie会把数据存储在浏览器端的硬盘上

4.cookie的使用场景

会话状态管理（如用户登录状态、购物车等）

个性化设置（保存用户设置的样式等）

浏览器行为跟踪（如跟踪分析用户行为等）

5.cookie的使用方式

1.设置cookie：document.cookie = "key=value;";   

// 保存数据的格式：
//  document.cookie="键=值;expires=日期的GMT格式的字符串"
function saveData(){
    // 在cookie里保存数据
    // 1、如果不写失效时间，那么，数据是临时保存（会话级别）。当浏览器关闭就会消失。
    // document.cookie = "username=安琪拉";
    // 2、如果写上失效时间点，那么，数据将会在该时间点后，被删除。
    // document.cookie = "username=安琪拉;expires=日期的GMT字符串格式";
    let d= new Date();
    d.setDate(d.getDate()+7);//设置为7天有效期
    document.cookie = "username=安琪拉;expires="+d.toGMTString();
}

 进一步封装：

//保存cookie（新建和修改）
// 参数：
//  键
//  值
//  时长（保质期）
//  path
//  domain
function saveCookie(key,value,daycount,path,domain){
    let d = new Date();
    d.setDate(d.getDate()+daycount);
    let str = `${key}=${encodeURIComponent(value)};expires=${d.toGMTString()}`;
    path && (str+=`;path=${path}`);
    domain && (str+=`;domain=${domain}`);
    document.cookie=str;
}

2.获取cookie：

    //从cookie获取指定键的值；（根据键获取值）；
    // 参数：键
    // 返回值： 键对应的值；
    function getCookie(key) {
            let str = document.cookie;// a=20; username=安琪拉; userid=001
            // 1、分割成数组
            let arr = str.split("; ");//["a=20","username=安琪拉","userid=001"]
            // 2、遍历数组(查找以username=开头的元素)
            str = arr.filter(item => item.startsWith(key + "="))[0];    //"username=安琪拉"
            return str==undefined  ?  undefined : str.split("=")[1];
    }

3.删除cookie：

cookie是到期自动失效的，我们可以通过修改key的值和有效时间来达到删除的目的：

 function removeCookie() {
        let d = new Date();
        d.setDate(d.getDate()-1);//设置失效时间为前一天
        document.cookie="username=byebye;expires="+d.toGMTString();
 }

6.查看cookie

在浏览器中按住键盘F12进入开发者工具后，选择Application（图中红色方框处），然后就能在左边看到cookie。

7.cookie的缺点         

cookie可能被禁用

cookie与浏览器相关，不能互相访问

cookie可能被用户删除

cookie安全性不够高

cookie会随着HTTP请求发送给服务器

cookie存储空间很小(只有4KB左右)

cookie操作麻烦，没有方便的API

二：webStorage 

webstorage 是 HTML5新增的存储数据的方案，比使用 cookie 更加直观。它提供了访问特定域名下的会话存储或本地存储的功能，如果是会话存储，则使用sessionStorage，如果是本地存储(硬盘)，则使用localStorage。sessionStorage和localStorage的官方函数一样。localStorage和sessionStorage都以键值对（key、value）的形式存储。

注意: 这不是javaScript语言本身的特性，是BOM的东西。

window.localStorage和window.sessionStorage。

1.localStorage

localStorage的生命周期是永久，除非手动去清除，否则永远都存在，他的储存大小是5MB，仅在客户端浏览器上储存，不参与服务器的通信。

用法：

      //设置localStorage保存到本地，第一个为变量名，第二个是值
      localStorage.setItem('username', '安琪拉')
      // 获取数据
      localStorage.getItem('username')
      // 删除保存的数据
      localStorage.removeItem('username')
      // 清除所有保存的数据
      localStorage.clear()

2.sessionStorage

sessionStorage顾名思义，是在当前会话下有效，引入了一个“浏览器窗口的概念”,sessionStorage是在同源的同窗口中，始终存在的数据，只要浏览器不关闭，即使是刷新或者进入同源的另一个页面，数据仍在。同时打开“独立”的窗口，即使是同一个页面，sessionStorage的对象也是不同的。关闭窗口后sessionStorage就会被销毁。

用法：

      // 设置sessionStorage保存到本地，第一个为变量名，第二个是值
      sessionStorage.setItem('sessionName', '可乐')
      // 获取数据
      sessionStorage.getItem('sessionName')
      // 删除保存的数据
      sessionStorage.removeItem('sessionName')
      // 清除所有保存的数据
      sessionStorage.clear()

3.查看

在浏览器中按住键盘F12进入开发者工具后，选择Application（图中红色方框处），然后就能在左边Storage列表中找到localStorage和sessionStorgae。

三：cookie、localStorage、sessionStorage的异同

1.共同点：

都是保存在浏览器端、且同源的 

2.区别

1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 。

 2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 。

3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；                         localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，没有设置的话浏览器关闭就会失效。

4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 。

5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 。

6、web Storage的api接口使用更方便。

四：localStorage 的优势与局限

localStorage 的优势

(1)localStorage 拓展了 cookie 的 4K 限制

(2)localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage 的局限

(1)浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性

(2)目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换

(3)localStorage 在浏览器的隐私模式下面是不可读取的

(4)localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

(5)localStorage 不能被爬虫抓取到 localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

总结

到此这篇关于JavaScript中cookie、localStorage和sessionStorage示例详解的文章就介绍到这了,更多相关cookie、localStorage和sessionStorage详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！