1 背景

最近因为一些机缘巧合，目前参与的项目里前端资源紧张，因此便承担起来了一些简单的前端页面的调整的工作。

好吧~其实我也就是Google、baidu去边查边猜的解决一些小问题。

今天遇到了一个页面上有一个下拉框，需要在页面刷新后仍然记录住上一次选择的选项的功能，由于对前端知识了解不深，没有想到更精巧的方法来实现，只是使用localStorage来做了一个简介的存储。

具体实现是，在页面刷新后优先从localStorage里读取选择项，如果存在则以localStorage里存储的为准，否则将设置默认选择项。

本文只是记录一下操作localStorage的一些使用方式，不涉及其他。

使用

1 引入

 // 引入
 import localStorage from "localStorage";

2 存储

 // 简单的key value 存储
 localStorage.setItem("area_info", "1")
 
 // 存储对象
 let areaObj = {"name":"区域1","area_id":"1"}
 localStorage.setItem("area_info",JSON.stringify(areaObj));

3 读取

 // 简单读取
 localStorage.getItem("area_info")
 
 //对象
 let areaInfo = JSON.parse(localStorage.getItem("area_info"))

4 删除

 // 删除指定的key
 localStorage.removeItem('area_id');
 
 // 清空本地localStorage
 localStorage.clear(); 

当前未涉及高级的使用，日后遇到了再补充。