JS Localstorage篇

Localstorage基础

• H5新增特性

  作用：本地存储, 解决了cookie存储空间不足的问题

  ​ cookie中每条cookie的存储空间只有4k，localStorage一般支持5M, 不同浏览器里localStorage可能会有不同

  优点：

  1. 拓展了cookie的4k的限制
  2. localStorage就相当于前端的5M的数据库

  劣势：

  1. 浏览器的大小不统一, 并且在IE8以上的浏览器才支持
  2. localStorage存储的数据的类型 默认都会转成string, 以后我们如果要存储复杂的数据结构, 一般都存储JSON数据结构

• 语法

  1. 存储

     /*
     * 语法1: localStorage.key = value;
     * 语法2: localStorage[key] = value;
     * 语法3: localStorage.setItem("key", "value");  官方推荐的写法
     */
     localStorage.a = 1;
     localStorage["b"] = "2";
     localStorage.setItem("c", 3);
     

  2. 取

     /*
     * 语法1: localStorage.key;
     * 语法2: localStorage[key];
     * 语法3: localStorage.getItem("key");  官方推荐的写法
     */
     console.log(localStorage.a);
     console.log(localStorage["b"]);
     console.log(localStorage.getItem("c"));
     

  3. 改：本质上就是对象的属性的重新覆盖

     localStorage.a = "hello";
     localStorage["b"] = "world";
     localStorage.setItem("d", "你好");			
     

  4. 删除

     * 1. 删除某一条键值对
         * 语法: localStorage.removeItem("key");
     * 2. 删除所有的localStorage
         * 语法: localStorage.clear()