详解localStorage

基本介绍

localStorage是html5中新添加的一个属性，用来作为前端存储数据的一个本地数据库。解决了cookie存储本地数据有限制的不足（cookie只有4k的内存）。不同的浏览器对于localstorage数据大小的支持不一样，但仍然远大于cookie的内存限制。

与sessionStorage的区别

localStorage是用于长久保存浏览器的缓存,除非手动删除，否则可以一直使用。
sessionStorage是用来在页面中临时保存数据，在页面或标签被关闭后，数据就被删除。
因此可以选择合适的存储方式来保存数据。

localStorage的优点

• localStorage相比于传统的cookie有更大的存储容量
• localStorage可以将请求得到的一次性数据以及一些与用户习惯性行为的信息存储在本地，不必占用浏览器带宽去存储和取回这些信息。提升请求速度

localStorage的缺点

• localStorage存在版本兼容性问题
• localStorage只能够存放string类型的数据，其他类型（如number,object,array）都会强制类型转换为String存储
• 当localStorage存储内容较大时会影响页面加载时间。
  这里带来两种关于localStorage读取的思路 详情

1. 在页面初次进入时就会读取数据,在后续的读取过程中就能够快速访问。但这样就会阻塞页面的加载，因为后续可能并没有使用到这些数据。
2. localStorage在第一次使用（js操作）的时候被调用，这样可以阻止对于页面加载的中断，但也意味着在第一次通过localStorage访问数据的时候浏览器会中断对于页面的处理（js执行、页面渲染等）。磁盘文件的所有localStorage数据都会被写进内存以加快后面对于localStorage数据的读取速度。同样地，通过localStorage保存的数据会首先写入内存，以后再写入到磁盘文件里，以加快写的速度。
3. localStorage不能被爬虫获取

localStorage的使用

作为一个前端的类数据库存储方式,localStorage应该包含基本的增删改查功能

新增

if(!window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
}

读取

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.a=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
    //第一种方法读取
    var a=storage.a;
    console.log(a);
    //第二种方法读取
    var b=storage["b"];
    console.log(b);
    //第三种方法读取
    var c=storage.getItem("c");
    console.log(c);
}

修改

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*分割线*/
    storage.a=4;
    console.log(storage.a);
}

删除

1、将localStorage的所有内容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2、 将 localStorage 中的某个键值对删除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

注意

1. 不同的网站直接是不能共用相同的 localStorage
2. 一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
   这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。