cookie、Sessionstorage、Localstorage快速上手

2024年5月23日 116次阅读 来源: web攻城狮

cookie、Sessionstorage、Localstorage快速上手

先说区别

cookie:

  1. 数据大小不能超过4KB。
  2. 不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，占用资源。
  3. 可以在后端设置修改，数据仅在本地浏览器保存。
  4. cookie数据可以设置路径，限制cookie只属于某个路径下。
  5. 默认数据失效是关闭浏览器，也可以设置失效时间

sessionStorage：

  1. 数据大小5M或者更大。
  2. 不会和跟随HTTP请求，所以不会占用资源。
  3. 数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。可以讲是“临时存储”
  4. sessionStorage在不同浏览器窗口下不会共享数据，即使打开同一个页面。

localStorage ：

  1. 数据大小5M或者更大。
  2. 不会和跟随HTTP请求，所以不会占用资源。
  3. 数据保存在本地硬件设备（通常指硬盘，也可以是其他），需要用户主动删除，否则就是永久保存 。不同浏览器之间不会共享数据。

cookie使用方法

cookie可以写好封装，也可直接用已经写好的框架这里推荐一个吧‘jquery.cookies.2.2.0.min.js’；注意还有有一个是cookie.js的也可以，个人觉得没有“jquery.cookies.2.2.0.min.js”好用。

先说一下，JavaScript原生的用法。

Cookie 以名/值对形式存储
例如username=John Doe，这里的数据是string类型，如要是其他格式注意进行格式转换。

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

设置cookie

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //设置过期时间
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //设置过期时间
  var expires = "expires="+SetTime.toGMTString();                   //设置过期时间
  document.cookie = cname + "=" + cvalue + "; " + expires;          //创建一个cookie
}

读取cookie

function getCookie(c_name)
{
if (document.cookie.length>0) 
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

删除cookie

将cookie的有效时间改成昨天。

cookies.js

注意这里用的是cookies.js
注意这里用的是cookies.js
不是cookie.js
它们是两个不同的插件，容易搞混

如果觉得上面的方法有点麻烦，就用别人已经封装好的插件吧，“jquery.cookies.2.2.0.min.js”

添加/修改cookie并设定过期时间：

`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });
这里设置的是过期时间是10小时
还可以这样设置过期时间：

expireDate = new Date();

expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );

$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});

获取cookie

$.cookies.get('cookie_id');

删除cookie

$.cookies.del('cookie_id');

SessionStorage 用法

H5对于web storage的支持很友好，使用方法很简单


sessionStorage.getItem(keyName);          //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;

sessionStorage.setItem(keyName,value);   // 将value存储到key字段中
//或者
sessionStorage.keyName='value';

sessionStorage.removeItem(keyName);     // 删除指定ke的本地存储的值
sessionStorage.clear();                 //清除所有的key ,value,慎用，慎用，慎用，会清除所有，会把别的网页的存储也删除

localStorage用法

基本和sessionStorage一样；


localStorage.getItem(keyName);          //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;

localStorage.setItem(keyName,value);   // 将value存储到key字段中
//或者
localStorage.keyName='value';

localStorage.removeItem(keyName);     // 删除指定ke的本地存储的值

localStorage.clear();                //清除所有的key ,value,慎用，慎用，慎用，会清除所有，会把别的网页的存储也删除
    原文作者：web攻城狮
    原文地址: https://segmentfault.com/a/1190000010099661
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞