【前端】前端本地存储

阅读数: 2021-09-18

前端本地存储

1	cookie、 localStorage、sessionStorage、application cache、Web SQL、IndexedDB ……

前言

待补充

前端存储总体概况

在h5之前，存储主要通过cookie实现。对于IE浏览器浏览器有UserData，大小是64k，只有IE浏览器支持，故作为了解即可。

cookie是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。

优点：兼容性好

缺点：一是增加了网络流量；二则是它的数据容量有限，最多只能存储4KB的数据，浏览器之间各有不同；三是请求头上带着数据,不安全。

主要应用：保存用户登录信息、创建购物车、跟踪用户行为等。

https://segmentfault.com/a/1190000004743454

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

function setCookie(name,value,domain,path) {
  domain = domain || location.host
  path = path || '/'
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape (value) + ";expires="+exp.toGMTString() + ";domain=" + domain + ";path=" + path;
}

function getCookie(name) {
  var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  if(arr=document.cookie.match(reg)) {
    return unescape(arr[2]);
  } else {
    return null;
  }
}

function delCookie(name,domain,path) {
  domain = domain || location.host
  path = path || '/'
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null) {
    document.cookie= name + "="+cval+";expires="+exp.toGMTString() + ";domain=" + domain + ";path=" + path;
  }
}


function listCookie() {
    var result = {}
    var arrCookie = document.cookie.split("; ");
    for(var i = 0; i < arrCookie.length; i++){
        var arr = arrCookie[i].split("=");
        result[arr[0]] = arr[1]
    }
    return result
}


function clearCookie(){
  var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
  keys = keys || []
  for (var i = keys.length; i--;){
    document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString()
  }
}

sessionStorae

使用sessionStorage、localStorage存储数组与对象 - ranyonsue - 博客园

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/69447c2c.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！