前端开发-Web存储

我就是我 2022-06-13 22:47 374阅读 0赞

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

[《我的博客地图》][Link 1]

理论的学习为了更好的拓展知识面的广度，具体知识点的实践为了挖掘知识的深度。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；

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

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

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

第二步，使用

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

未完待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440