Localstorage 使用

发表于

前段时间想用electron做一个类似TODO的应用, 我平时的工作写后端比较多, 走了一些坑, 也学了一些东西, 以下是我学习到的localstorage的总结:

localStorage 基本特点:
　　以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除

浏览器各种存储方式比较
　　cookie(4k)
　　localStorage(5M)

各大网站使用的浏览器存储方式比较:
　　走访了一些网站, 看了看控制台的存储使用状况, 发现还是cookie居多, 也有用LocalStorage的(比如淘宝, 京东(不过大多是直接存DOM))

网上常见的Localstorage使用说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function parseDom(arg) {
　　 var objE = document.createElement("div");
　　 objE.innerHTML = arg;
　　 return objE.childNodes;
};
// 将DOM转化为string
a = $("#lists").html()
// 存储到localstorage
//localStorage.setItem("todos", JSON.stringify(a))
localStorage.setItem("todos", a)
// 将string 转化为DOM
b = parseDom(localStorage["todos"])
最后插入DOM
$("#lists").empty()
$("#lists").append(b)

直接用LocalStorage 存储DOM的方式
　　做GTD时, 我想, 既然需要存储的信息不多(<5M), 所以何必不用localStorage直接存储DOM好了,实现方式如下：

1
2
3
4
5
6
7
8
function saveTODO() {
    var l = document.querySelector('#lists').childNodes
    localStorage.setItem("todos", JSON.stringify(l))
}
// 清除所有todos
function clearAll() {
    localStorage.clear()
}

Localstorage 的另类用法
　　web存储器之间的区别主要是大小, 鉴于web的特殊性, 其实我们可以利用 localStorage 做一些网站上的优化, 例如:

将一些常用的静态文件存入localStorage, 并按照使用频率排序, 低频的文件直接清除.这样可以大大提高网站的加载速度,节省流量