浏览器存储的方式有哪些？

Posted 2021-09-10 茴香

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4k	5M	5M	无限
与服务器通信	每次都携带在header中对请求性能有影响	不参与	不参与	不参与

补充：

cookie 原来并不是用来储存的，而是用来与服务端通信的，需要存取时要自行封装api

//存储cookie 不设置时间为永久存储cookie
function setCookie(cname, cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; ";
}
//获取cookie
function getCookie (cname) {
  var arr, reg = new RegExp("(^| )" + cname + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
    return (arr[2]);
  else
    return null;
}

localStorage

• 自带getItem 和 setItem 方法。
• 只能存字符串，若需要存取JSON格式时，需要配合 JSON.stringify() [该方法用于将 javascript 值转换为 JSON 字符串将] 和JSON.parse()[该方法用于将数据转换为 JavaScript 对象，常用于转化成json]。
• 另外有些浏览器禁用setItem,此时需要使用try...catch捕获异常进行处理