美文网首页
cookie、sessionStorage和localStora

cookie、sessionStorage和localStora

作者: jingqian_xi | 来源:发表于2017-09-27 16:59 被阅读0次

基本概念

cookie:存储在客户端的小型文本文件,可以包含若干键值对,每个键值对可以设置过期时间(默认过期时间为关闭浏览器时)。 cookie会在每次发送HTTP请求时附加到Cookie头字段,服务器以此得知用户所处的状态。 cookie限制在4kb
sessionStorage:会话存储,存储在本地,不会被发送到服务器上,并且关闭后存储的内容失效。最多可以存储5-10M
localStorage:本地存储,不会被发送到服务器上,默认会永久存储,除非手动删除。最多可以存储5-10M

Storage支持的浏览器版本

imp.png

差异

特性 数据的生命周期 存储大小 发送服务端 易用性
cookie 关闭浏览器实效(可配置) 4kb 携带在HTTP头中
sessionStorage 当前会话下有效,关闭页面或浏览器后被清除 5mb 需要在代码里主动上传服务端
localStorage 永久有效,除非手动删除 5mb 需要在代码里主动上传服务端

使用

cookie:

//记录cookie值
function setCookie (name,value){
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
};
//获取cookie值
function getCookie (name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr !== null){
        return unescape(arr[2]);
     }else{
         return null;
     }
};
//删除cookie值
function deleteCookie (name) {
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    document.cookie = name + "=; expires=" + exp.toGMTString();
};

sessionStorage:

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

localStorage:

// 保存数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据
var data = localStorage.getItem('key');

// 从localStorage删除保存的数据
localStorage.removeItem('key');

// 从localStorage删除所有保存的数据
localStorage.clear();

相关文章

网友评论

      本文标题:cookie、sessionStorage和localStora

      本文链接:https://www.haomeiwen.com/subject/ezjuextx.html