资讯专栏INFORMATION COLUMN

cookie、Sessionstorage、Localstorage快速上手

Galence / 3428人阅读

摘要:快速上手先说区别数据大小不能超过。可以在后端设置修改,数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。默认情况下,属于当前页面。

cookie、Sessionstorage、Localstorage快速上手 先说区别

cookie:

数据大小不能超过4KB

不管是否有需求,cookie数据都会在HTTP请求中携带,在浏览器和服务器中来回传递,占用资源。

可以在后端设置修改,数据仅在本地浏览器保存。

cookie数据可以设置路径,限制cookie只属于某个路径下。

默认数据失效是关闭浏览器,也可以设置失效时间

sessionStorage:

数据大小5M或者更大。

不会和跟随HTTP请求,所以不会占用资源。

数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。可以讲是“临时存储

sessionStorage在不同浏览器窗口下不会共享数据,即使打开同一个页面。

localStorage :

数据大小5M或者更大。

不会和跟随HTTP请求,所以不会占用资源。

数据保存在本地硬件设备(通常指硬盘,也可以是其他),需要用户主动删除,否则就是永久保存 。不同浏览器之间不会共享数据。

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,慎用,慎用,慎用,会清除所有,会把别的网页的存储也删除

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83898.html

相关文章

  • cookieSessionstorageLocalstorage快速上手

    摘要:快速上手先说区别数据大小不能超过。可以在后端设置修改,数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。默认情况下,属于当前页面。 cookie、Sessionstorage、Localstorage快速上手 先说区别 cookie: 数据大小不能超过4KB。 不管是否有需求,cookie数据都会在HTTP请求中携带,在浏览器和服务器中来回传递,...

    duan199226 评论0 收藏0
  • cookieSessionstorageLocalstorage快速上手

    摘要:快速上手先说区别数据大小不能超过。可以在后端设置修改,数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。默认情况下,属于当前页面。 cookie、Sessionstorage、Localstorage快速上手 先说区别 cookie: 数据大小不能超过4KB。 不管是否有需求,cookie数据都会在HTTP请求中携带,在浏览器和服务器中来回传递,...

    ShowerSun 评论0 收藏0
  • Web Storage 与cookies

    摘要:和虽然也有存储大小的限制,但比大得多,可以达到或更大支持事件通知机制,可以将数据更新的通知发送给监听者。有时也用,指某些网站为了辨别用户身份,进行跟踪而存储在本地终端上的数据,通常经过加密。 Web Storage介绍 Web Storage带来的好处 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传...

    zhkai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<