前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cookie和本地存储的区别

cookie和本地存储的区别

作者头像
念念不忘
发布2019-03-29 16:45:20
2.5K0
发布2019-03-29 16:45:20
举报

cookie

基本概念

  1. cookie非常小,限制在4kb左右,很多浏览器都限制一个站点最多保存20个cookie。
  2. 如果没有设置时间,则表示cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失,这种被称为会话cookie,它会被保存在内存中。
  3. 当设置了过期时间,浏览器会把cookie保存在硬盘中,关闭浏览器之后任然有效,直到超过设定的过期时间。

设置和获取cookie的方法

原生

代码语言:javascript
复制
// 使用js创建cookie
document.cookie="username=John Doe";
// 添加一个过期时间
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
// 使用path 告诉浏览器cookie的路径
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";


//读取
var x = document.cookie;
// 修改  旧的值将会被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

// 删除 删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

封装

代码语言:javascript
复制
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;
}

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 "";
}

localStorage和sessionStorage

优势
  • 扩展了cookie的4k限制,为了更大的容量存储而设计的,是在浏览器端存储的数据
  • 减少网络流量,快速的读取数据,性能较好,可以作为临时存储
  • localStorage是永久性存储,而sessionStorage属于当会话结束的时候,就会被清空
劣势
  • 本质上是对字符串的读取,内容较多的时候 会消耗内存,导致页面变卡,
  • 不能被爬虫抓取到

三者的异同

特性名称

cookie

localStorage

sessionStorage

数据的声明周期

可设置失效时间,默认是关闭浏览器后失效

除非被清除,否则永久保存

仅仅在当前会话下有效,关闭页面或者浏览器后会被清除

存放的数据大小

4k左右

一般为5M

一般为5M

与服务端通信

会在http头中携带,如果使用cookie保存过多数据会带来性能问题

仅在浏览器端保存不参与服务器的通信

仅在浏览器端保存不参与服务器的通信

易用性

需要自己封装

有现成的api接口可以使用

有现成的api接口可以使用

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.12.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • cookie
    • 基本概念
      • 设置和获取cookie的方法
        • 优势
        • 劣势
    • localStorage和sessionStorage
    • 三者的异同
    相关产品与服务
    对象存储
    对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档