前端开发-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"…}

5、localStorage 和 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

未完待续...