javaScript中的Cookie和web Storage(LocalStorage-SessionStorage)详解

javaScript中的Cookie和web Storage(LocalStorage-SessionStorage)

一、Cookie

cookie称之为会话跟踪技术，顾名思义，就是在一次会话中跟踪记录一些状态。首先，所谓的”会话“指的就是从浏览器打开一个网站到访问它的其他网页直到浏览器关闭的这个过程。
cookie就可以在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。

Cookie的特点

1. 只能存储文本
2. 单条存储有大小限制4KB左右
3. 数量限制：一般浏览器，限制大概在50条左右
4. 读取有域名限制：不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。
5. 时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间
6. 路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。一般cookie都存在项目的根目录，这样就可以避免这种问题。

cookie的使用

cookie的使用方式很简单，系统提供的只有一个属性 document.cookie，无论是存还是取或者其他操作都是通过这一个属性来完成

• 存：

document.cookie="name=xiaoming";  // 存一条name为xiaoming的cookie;
document.cookie = "age=30"; // document.cookie反复赋值不是覆盖，而是存多条cookie
document.cookie = 'name=zhangsan'; //相同name为修改（覆盖）

在这里插入图片描述

如果想要存一条中文的cookie，比如：uname=张三，在部分低版本浏览器就会遇到一些位置错误，这时就可以使用 encodeURIComponent 编码对中文进行编码

var name="张三";
document.cookie="name="+encodeURIComponent(name);

在这里插入图片描述

取得时候可以通过decodeURIComponent 方法进行解码

• 取：
  这里直接console.log(document.cookie)就行;

 console.log(document.cookie);

在这里插入图片描述

这里出现这种编码是因为刚才存的时候用encodeURIComponent进行了编码

在这里插入图片描述

当我们不想要这条cookie的时候我们可以点这里删除或者清除所有
当然我们也可以用代码来删除，下面会封装一个删除的方法的，当然也会封装存和取的方法。

• cookie的时效性

  
  
  在这里插入图片描述
  • 从上面图可以看到存过的cookie，其中有Expires/max-Age选项，这一项指的就是cookie的有效期，我们可以看到是session，代表会话期，也就是默认的会话结束cookie失效，这时我们重启浏览器就看不到这条cookie了。
  • 除了默认的会话过期我们还可以手动设置cookie的过期时间，比如：7天后过期

      var date = new Date();
      date.setDate(date.getDate() + 7);
      document.cookie = `name=lisi;expires=${date.toUTCString()}`;
  

  在这里插入图片描述
  
  

  toUTCString()方法转成了标准时区，所以比北京时间快8个小时，这时我们关闭浏览器再次打开，仍然可以看到这条cookie

• cookie的存储路径

  
  
  在这里插入图片描述
  
  

  可以看见是指定路径的但是在其他路径是拿不到的，所以我们可以把路径指向根目录这样下面的子目录都可以访问这条cookie了

document.cookie = "name=lisi;path=/";

所以下面我们就可以封装cookie方法啦

封装一个存cookie的方法

/** 存一条cookie
 * @param {string} key 要存的cookie的名称
 * @param {string} value 要存的cookie的值
 * @param {object} [options] 可选参数，过期时间和目录，如：{ path: '/', expires: 7 }存根目录7天过期的cookie
 */
function setCookie (key, value, options) {
    var str = `${key}=${encodeURIComponent(value)}`
    // 先判断options是否传进来了
    //encodeURIComponent是进行编码
    if (options) {
        // 如果传进来了再判断有哪个属性
        if (options.path) {
            // 路径拼接进去
            str += `;path=${options.path}`;
        }
        if (options.expires) {
            var date = new Date();
            // 日期设置为过期时间
            date.setDate(date.getDate() + options.expires);
            str += `;expires=${date.toUTCString()}`;
        }
    }
    document.cookie = str;
}

//使用setCookie ("name", '张三', {path:"/",expires:5});

封装一个取cookie的方法

取cookie同样使用document.cookie这个属性；但是我们可以看到是带有name属性和=的，我们想要通过name属性拿到属性值怎么办？

/** 获取某一条cookie
 * @param {string} key 要获取的cookie的名称
 * @retrun {string} 当前这条cookie的值
 */
getCookie (key) {
    var str = document.cookie;
    var arr = str.split('; ');
    //多条cookie之间以"; ""; 隔开的
    var obj = new Object();
    arr.forEach(item => {
        var subArr = item.split('=');
        obj[subArr[0]] = decodeURIComponent(subArr[1]);
        //decodeURIComponent是进行解码
    })
    return obj[key];
}
//使用getCookie (key);

封装一个删除cookie的方法

/** 删一条cookie
 * @param {string} key 要删的cookie的名称
 * @param {path} [path] 可选参数，要删的cookie的所在的路径，如果就是当前路径这个参数可以不传
 */
function removeCookie (key, path) {
    var date = new Date();
    date.setDate(date.getDate() - 1); // 过期时间设置为昨天
    var str = `${key}='';expires=${date.toUTCString()}`;
    if (path) {
        str += `;path=${path}`;   
    }
    document.cookie = str;
}

也可以用存cookie的方法把expires为-1即可

setCookie ("name", '', {path:"/",expires:-1});

修改cookie

从新存一个相同name把之前的覆盖掉就是修改cookie了

封装一个 增删改查 一体的cookie

// 通过判断有没有传第二个参数value来决定是存还是取
// 这个方法也可以用于删cookie，比如：cookie('username', '', { expires: -1, path: '/' })
function cookie (key, value, options) {
    if (value) {
        var str = `${key}=${encodeURIComponent(value)}`
        if (options) {
            if (options.path) {
                str += `;path=${options.path}`;
            }
            if (options.expires) {
                var date = new Date();
                date.setDate(date.getDate() + options.expires);
                str += `;expires=${date.toUTCString()}`;
            }
        }
        document.cookie = str;
    } else {
        var str = document.cookie;
        var arr = str.split('; ');
        var obj = new Object();
        arr.forEach(item => {
            var subArr = item.split('=');
            obj[subArr[0]] = decodeURIComponent(subArr[1]);
        })
        return obj[key];
    }
}

二、web Storage(LocalStorage-SessionStorage)

• h5新增的
• 大小可以存5M左右
• 过期时间不可配置的
  • localStorage 永不过期，只要不用代码手动删除就一直在
  • sessionStorage 会话期有效，关闭浏览器就清除
• 不存在路径问题，无论在那存当前网站的任意路径都可以使用
• js本身提供了存取的api，两种api是一样的

localStorage存

localStorage.setItem('name', '李四');

localStorage取

value = localStorage.getItem('name');
console.log(value);

localStorage删

localStorage.removeItem('name'); //删除一条
localStorage.clear(); //删除所有

• localStorage一般用于本地存储一些比较大的数据
• sessionStorage的用法和localStorage一摸一样，区别只是在于有效期

sessionStorage存

sessionStorage.setItem('name', '李四');

sessionStorage取

value = sessionStorage.getItem('name');
console.log(value);

sessionStorage删

sessionStorage.removeItem('name'); //删除一条
sessionStorage.clear(); //删除所有

总结Cookie和web Storage异同点及优劣势

Cookie和web Storage的相同点

• 都可以用于存储用户数据
• 存储数据的格式都是字符串形式
• 存储的数据都有大小限制

Cookie和web Storage的不同点

• 生命周期不同。sessionStorage 的生命周期是一个会话，localStorage的生命周期是永久，cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问。
• 存储大小限制不同。大部分现代浏览器 Storage 的存储限制大小为 5M，cookie 的存储大小限制 为 4K。
• 浏览器支持不同，API 调用方式不同。

Cookie和web Storage的优劣势

• 真实项目中其实前端很少操作cookie，一般由后端来种cookie一般cookie存后端给的令牌，带着这个令牌请求后端数据
• web Storage一般用于本地存储一些比较大的数据，优点在于存储空间大
• cookie每次都随请求数据发送到服务器端，Web Storage不会和请求数据一同发送到服务器端，占用带宽更少
• cookie支持所有浏览器，而Web Storage只有现在的浏览器才支持，如果需要兼容老版本浏览器就不能使用Web Storage

今天分享就到这里啦，喜欢就关注一波呗~~~以上内容全部由自己整理，就有发现问题欢迎评论一起讨论学习-_-