一篇文章学会LocalStorage

【简介】

LocalStorage，即本地存储，详见： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

【cookie vs LocalStorage】

服务端是否可以获取？

|—cookie：服务端可以获取，每次请求默认会携带cookie内容

|—LocalStorage：服务端无法获取

存储大小

|—cookie：4096字节

|—LocalStorage：5M

有效期

|—cookie：可以设置有效期

|—LocalStorage：默认无法设置有效期

【LocalStorage使用】

LocalStorage使用比较简单，如下

// set
localStorage.setItem("myCat", "Tom");

// get
const cat = localStorage.getItem("myCat");

// remove
localStorage.removeItem("myCat");

// clear
localStorage.clear();

【LocalStorage存储数字】

这里需要注意，LocalStorage最终保存的是字符串，所以一些涉及数字的操作要小心哦

// set
localStorage.setItem("number", 1);

// get，这里返回的是：'1'
localStorage.getItem("number");

【LocalStorage存储对象】

由于LocalStorage最终保存的是字符串，所以如果直接存储对象，获取到的内容如下

// set
localStorage.setItem("obj", {});

// get，这里返回的是：'[object Object]'
localStorage.getItem("obj");

对于需要保存对象的场景，可以这么做

// set
localStorage.setItem("obj", JSON.stringify({}));

// get，这里返回的是{}
JSON.parse(localStorage.getItem("obj"));

通过使用JSON的stringify和parse方法，保存和获取对象

【LocalStorage查看】

通过以上的内容已经可以设置LocalStorage了，设置完成后可以在chrome devtool中查看到，如下

Application-Storage-Local Storage中

【LocalStorage存储大小】

上面说到LocalStorage可以存储不超过5M大小的内容，这个限制是否准确，如何验证？

可以本地写一段代码测试，例如找一个20k的文件，写入LocalStorage大约300次，看是否可以写入成功，

代码如下，这里value可以找一个压缩过的js文件内容，例如axios的内容

const value = `axios.js content`;

const count = 300;
for (let i = 0; i < count; i++) {
  localStorage.setItem(`key${i}`, value);
}

发现写入到266次时报错，如下

大概换算一下（20K*266）/ 1024 = 5.19M

所以可以证明LocalStorage设置大小的内容上限是5M

【LocalStorage设置过期时间】

上面说到cookie支持设置过期时间，但是LocalStorage不支持设置过期时间，

如果需要为LocalStorage设置过期时间，应该怎么做呢？

可以自己定制一个get，set方法，在方法内人为的添加过期时间，如下

/**
 * set item
 *  name
 *  value
 *  expires, ms
 */
function setItem(name, value, expires) {
  if (!localStorage) {
    console.log("unsupport localStorage");
    return;
  }

  const obj = {};
  obj.value = value;
  if (expires) obj.expires = Date.now() + expires;

  localStorage.setItem(name, JSON.stringify(obj));
}

/**
 * get item
 *  name
 */
function getItem(name) {
  if (!localStorage) {
    console.log("unsupport localStorage");
    return;
  }

  const objStr = localStorage.getItem(name);
  let obj;
  try {
    obj = JSON.parse(objStr);
  } catch (e) {
    console.log("json parse error:");
    console.log(e);
  }
  if (!obj) return;

  if (obj.expires && obj.expires < Date.now()) {
    localStorage.removeItem(name);
    return;
  }

  return obj.value;
}

【qiao.ls.js】

封装了一个npm包，欢迎使用， https://code.insistime.com/#/qiao.ls.js

|— 简化set操作

// q
import { ls } from "qiao.ls.js";

// set
ls("name", "value");

|— 简化get操作

// q
import { ls } from "qiao.ls.js";

// get
console.log(ls("name")); // value

|— 简化del操作

// delete
ls("name", null);
console.log(ls("name")); // undefined

|—支持直接存取对象

// set obj
ls("obj", {});

// get obj
ls("obj"); // {}

|— 支持设置过期时间

// set 10s expires
ls("name", "value", 10 * 1000);

|—支持commonjs语法

// --cjs
// q
const q = require("qiao.ls.js");

// set
q.ls("name", "value");

// set 10s expires
q.ls("name", "value", 10 * 1000);

// get
console.log(q.ls("name")); // value

// delete
q.ls("name", null);
console.log(q.ls("name")); // undefined

|—支持es6 module语法

// --mjs
// q
import { ls } from "qiao.ls.js";

// set
ls("name", "value");

// set 10s expires
ls("name", "value", 10 * 1000);

// get
console.log(ls("name")); // value

// delete
ls("name", null);
console.log(ls("name")); // undefined

【总结】

1. LocalStorage使用介绍
2. LocalStorage和cookie的对比
3. LocalStorage存储数字类型
4. LocalStorage存储对象类型
5. LocalStorage在chrome devtool下查看
6. LocalStorage容量不超过5M验证
7. LocalStorage设置过期时间
8. LocalStorage工具&增强： https://code.insistime.com/#/qiao.ls.js