浅谈 sessionStorage、localStorage、cookie 的区别以及使用

最新推荐文章于 2022-02-22 00:53:33 发布

转载最新推荐文章于 2022-02-22 00:53:33 发布 · 83 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cda3815f265da03b8587181

本文深入解析了sessionStorage、localStorage与cookie在Web存储中的角色。阐述了它们的生命周期、存储容量及安全性差异，同时提供了简单实用的代码示例。

1、sessionStorage、localStorage、cookie 之间的区别

相同点

cookie 和 webStorage 都是用来存储客户端的一些信息

不同点

localStorage

localStorage 的生命周期是永久的。也就是说只要不是手动的去清除。localStorage 会一直存储

sessionStorage

相反 sessionStorage 的生命周期只是临时的。只要是当前的窗口或者标签页关闭话就会自动清除。当然这里面涉及到 同源策略 的问题。

cookie

相对于 cookie 类似于 localStorage 但是又不完全相同。cookie 是可以设置一个过期时间。关闭浏览器后cookie 还是存在的。它会一直等到时间过期才会销毁。但是 cookie 会有一个大小的限制。不同于sessionStorage、localStorage（一般是5M）但是 cookie （4k左右）不同浏览器也是不同的。

最重要的一点 cookie 存储会出现安全上的问题。因为 cookie 会传给服务器的。

慎用之

2、sessionStorage、localStorage、cookie 简单的使用方法

sessionStorage、localStorage 使用

localStorage和sessionStorage使用时使用相同的API 在这用 sessionStorage 举例

1、设置一个值
sessionStorage.setItem('key','value')
2、获取一个值
sessionStorage.getItem('key')
3、删除一个值
sessionStorage.removeItem("key");
4、清空
localStorage.clear(); // 清除数据--删除所有同源的本地存储的localStorage数据
sessionStorage.clear();//清除数据---只清空当前会话存储的数据
复制代码

cookie 的使用

1、设置 cookie 值的函数
function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
2、获取 cookie 值的函数
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
3、删除 cookie 
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

复制代码

本文结束这里只是 sessionStorage、localStorage、cookie 这三者的一些简单的知识。如有不对，请指正

转载于:https://juejin.im/post/5cda3815f265da03b8587181