前端开发-Web存储

最近更新时间:2017年6月4日13:52:30

《我的博客地图》

    理论的学习为了更好的拓展知识面的广度,具体知识点的实践为了挖掘知识的深度。Web存储技术可以理解为浏览器的本地存储技术,可以增强用户访问网站的体验。

    早些时候,本地存储使用 cookie,现在流行的技术是浏览器封装的 localStorage 和 sessionStorage 对象。

    存储容量:cookie-4kb,localStorage-5Mb,sessionStorage-5MB

1、cookie

    用于存储web页面的用户信息,cookie是一些数据,存储在客户端浏览器本地;

    默认情况下,cookie在浏览器关闭时自动删除,但仅关闭浏览器标签不会删除,同时可以人为为 cookie 添加过期时间(UTC-世界统一时间 或 GMT-格林尼治时间-格林尼治所在地时间-英国伦敦格林尼治区);

    JavaScript原生语法操作cookie:

保存数据:document.cookie = "name=wanshaob";//这个方法是在已有cookie的数据上 增加||覆盖 内容

保存数据:document.cookie = "name=wanshaob; expires=Sun Jun 04 2017 15:04:03 GMT+0800";

//注意:经测试,chrome浏览器 最小过期时间大于8小时,即,实际cookie过期时间是设定的过期时间后的8小时生效;

读取数据:let cookie = document.cookie;//以字符串形式返回所有cookie

删除数据:document.cookie = "name=wanshaob; expires=Sun Jun 04 2017 15:04:03 GMT+0800";

删除数据:document.cookie = "name=; expires=Sun Jun 04 2017 15:04:03 GMT+0800";

//键值对中的值可有可无,主要在于设置过期时间应小于当前时间(chrome浏览器小于当前时间减去8小时),可立即删除cookie;

function setCookie(key,value,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));//setTime以毫秒数设置当前时间;getTime获取当前时间的毫秒数
  var expires = "expires="+d.toUTCString();//根据世界时,把 Date 对象转换为字符串。
  document.cookie = key + "=" + value + "; " + expires;
}

function getCookie(cookie){
  var key = cookie + "=";
  var cookieArr = document.cookie.split(';');
  for(var i=0; i<cookieArr.length; i++)
  {
    var cookieTrim = cookieArr[i].trim();
    if (cookieTrim.indexOf(key) == 0)
      return cookieTrim.substring(key.length, cookieTrim.length);
  }
  return "";
}
setCookie('name','wanshaobo',1);
setCookie('age','20',1);
console.log(document.cookie);//name=wanshaobo; age=22
console.log(getCookie('age'));//20

function checkCookie(key){
  var username = getCookie(key);
  if (username != ""){
    alert("Welcome:" + username);
  }else{
    username = prompt("input key:","");//类似于alert的弹出输入框
    if (username != "" && username != null){
      setCookie(key,username,365);
    }
  }
}


    以上是一个封装好的操作cookie的三个方法;

    JavaScript函数库 jQuery 的 cookie插件 操作 cookie的语法:

    第一步,引入js文件,三种方案,cdn,本地静态资源,npm

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="/jquery.cookies.min.js"></script>

    第二步,使用

let expires = new Date();
expires.setTime( expires.getTime() + ( 24 * 60 * 60 * 1000 ) );
$.cookies.set('key', 'value', {expiresAt: expires});//设置
$.cookies.get('key');//获取
$.cookies.del('key');//删除

    第三,源码解读

2、localStorage 和 sessionStorage

    这两个对象用来在浏览器客户端存储数据,API相同,唯一不同点是:

    localStorage 对象是没有时间限制的数据存储,只要不执行数据删除方法,任何网站存储在用户客户端浏览器的数据一直保存。

    sessionStorage 对象是针对一个 session(临时会话) 的数据存储,用户关闭浏览器标签 || 关闭浏览器,数据自动销毁;或执行数据删除方法,数据也会直接消失。

3、localStorage 和 sessionStorage API

    这两个对象的API相同:

保存数据:localStorage.setItem('key','value') || sessionStorage.setItem('key','value');

读取数据:localStorage.getItem('key') || sessionStorage.getItem('key');

删除单个数据:localStorage.removeItem('key') || sessionStorage.removeItem('key');

删除所有数据:localStorage.clear() || sessionStorage.clear();

得到某个索引的key:localStorage.key(index) || sessionStorage.key(index);

注意:console.log(localStorage.key,localStorage.getItem('key'));//undefined null

4、查看本地存储localStorage 的所有数据

    方案一:

for(let i=0,len=localStorage.length; i<len; i++){

  console.log(localStorage.key(i));

}

    方案二:

localStorage.clear();
for(var i=0;i<10;i++){
  localStorage.setItem('name'+i,i);
}
console.log(localStorage);//Storage {name0: "0", name1: "1", name2: "2", name3: "3", name4: "4"…}

5localStorage 和 sessionStorage 保存数据的注意事项:避免和本地已经存在的键名重名;

6、web存储的标准操作

    由于IE7以及更早IE版本不支持web存储,因此在操作web存储时需要做特殊处理,这是一个很好的习惯;

if(typeof(Storage) !== 'undefined'){

  //该浏览器支持localStorage 和 sessionStorage

  //console.log(Storage);//function Storage() { [native code] }

  //console.log(typeof(Storage));//function

  try{

    localStorage.setItem(key, value);

  }catch(oException){
    if(oException.name == 'QuotaExceededError'){
        console.log('超出本地存储限额!');

        localStorage.clear();//如果历史信息不重要了,可清空后再设置

        localStorage.setItem(key,value);
    }
}

}else{

 //注意,该浏览器不支持localStorage 和 sessionStorage

}

7、存储容量问题,存储多少条数据,存储多大容量数据?以localStorage为例

    存储数据量测试一,无异常处理机制:

localStorage.clear();

for(var i=0;;i++){

  localStorage.setItem('age'+i, i);

//控制台报错:

//"QuotaExceededError限额超出错误: 

//Failed to execute执行 'setItem' on 'Storage': Setting the value of 'age364340' exceeded the quota."
}

    存储数据量测试二,有异常处理机制:

localStorage.clear();
console.log(localStorage.length);//0
for(var i=0;;i++){
  try{
    localStorage.setItem('age'+i, i);
  }catch(oException){
    if(oException.name == 'QuotaExceededError'){
      console.log('超出本地存储限额!');
      break;
    }
  }
}
console.log(localStorage.length);//364340

8、localStorage存-取 JSON 数据时的方案

    由于 localStorage 存数据的时候,默认会将数据保存为字符串的形式,导致 JSON 数据混乱,因此,需要人为手动在 JSON-String 之间进行转换;如下:

let data={name:'wanshaobo', age:20};
let str01=JSON.stringify(data);
localStorage.setItem("data",str01);
let str02=localStorage.getItem("data");
let obj=JSON.parse(str02);
console.log(typeof obj);//object

9、localStorage对象API的使用小技巧

console.log(localStorage.length);//localStorage对象存储的数据个数
console.log(localStorage);

//输出 localStorage对象 Storage 

//{data: "{"name":"wanshaobo","age":20}", name0: "0", name1: "1", name2: "2", name3: "3"…}
console.log(localStorage.getItem(localStorage.key(0)));//{"name":"wanshaobo","age":20}
console.log(localStorage.getItem(localStorage.key(0)).length);

//29 执行localStorage对象的第一个数据的toString方法
console.log(localStorage.key(0));//data
console.log(localStorage.key(0).length);//4
console.log(localStorage.key(1));//name0
console.log(localStorage.key(1).length);//5

10、浏览器的 localStorage对象 存储容量到底有多少的测试程序

localStorage.clear();
console.log(localStorage.length);//0
for(var i=0;;i++){
  try{
    localStorage.setItem('key'+i, 'value'+i);
  }catch(oException){
    if(oException.name == 'QuotaExceededError'){
      console.log('超出本地存储限额!');
      break;
    }
  }
}
console.log(localStorage.length);//273255
var maxStorage = 0;
for(var i=0,len=localStorage.length;i<len;i++){
  maxStorage += localStorage.key(i).length;//key的长度 1个字符串占一个字节
  maxStorage += localStorage.getItem(localStorage.key(i)).length//value的长度 1个字符串占一个字节
}
console.log('该浏览器的localStorage对象最大存储数据容量为' + (maxStorage / 1024));//5120KB

11、浏览器的 localStorage对象 存储容量余量测试程序

var residueStorage = 0, storage = 0;
for(var i=0,len=localStorage.length;i<len;i++){
  storage += localStorage.key(i).length;//key的长度 1个字符串占一个字节
  storage += localStorage.getItem(localStorage.key(i)).length//value的长度 1个字符串占一个字节
}
residueStorage = maxStorage - storage/1024;
console.log('该浏览器的localStorage对象数据存储容量剩余' + residueStorage);//3854KB
未完待续...

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

万少博

快打赏我吧

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值