本地存储localStorage⽤法详解

⼀、什么是localStorage？
在HTML5中，新加⼊了⼀个localStorage特性，这个特性主要是⽤来作为本地存储来使⽤的，解决了cookie存储空间不⾜的问题(cookie中每条cookie的存储空间为4k)，localStorage中⼀般浏览器⽀持的是5M⼤⼩，这个在不同的浏览器中localStorage 会有所不同。

⼆、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第⼀次请求的数据直接存储到本地，这个相当于⼀个5M⼤⼩的针对于前端页⾯的数据库，相⽐于cookie可以节约带宽，但是这个却是只有在⾼版本的浏览器中才⽀持的
localStorage的局限
1、浏览器的⼤⼩不统⼀，并且在IE8以上的IE版本才⽀持localStorage这个属性
2、⽬前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们⽇常⽐较常见的JSON对象类型需要⼀些转换
3、localStorage在浏览器的隐私模式下⾯是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页⾯变卡
5、localStorage不能被爬⾍抓取到
localStorage与sessionStorage的唯⼀⼀点区别就是localStorage属于永久性存储，⽽sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

三、localStorage的使⽤
清空localStorage
localStorage.clear() // undefined
localStorage //Storage {length: 0} 存储数据
存储数据
localStorage.setItem(“name”,“caibin”) //存储名字为name值为caibin的变量
localStorage.name = “caibin”; // 等价于上⾯的命令
localStorage // Storage{name: “caibin”, length: 1} 读取数据
读取数据
localStorage.getItem(“name”) //caibin,读取保存在localStorage对象⾥名为name的变量的值
localStorage.name // “caibin”
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第⼀条数据的变量名(键值)
//遍历并输出localStorage⾥存储的名字和值
for(var i=0; i<localStorage.length;i++){
console.log(‘localStorage⾥存储的第’+i+‘条数据的名字为：’+localStorage.key(i)+‘,值为：’+localStorage.getItem(localStorage.key(i)));
}
删除某个变量
localStorage.removeItem(“name”); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage⾥删除了
检查localStorage⾥是否保存某个变量
// 这些数据都是测试的，是在我当下环境⾥的，只是demo哦～
localStorage.hasOwnProperty(‘name’) // true
localStorage.hasOwnProperty(‘sex’) // false
将数组转为本地字符串
var arr = [‘aa’,‘bb’,‘cc’]; // [“aa”,“bb”,“cc”]
localStorage.arr = arr //[“aa”,“bb”,“cc”]
localStorage.arr.toLocaleString(); // “aa,bb,cc”
将JSON存储到localStorage⾥
var students = {
xiaomin: {
name: “xiaoming”,
grade: 1
},
teemo: {
name: “teemo”,
grade: 3
}
}
students = JSON.stringify(students); //将JSON转为字符串存到变量⾥
console.log(students);
localStorage.setItem(“students”,students);//将变量存到localStorage⾥
var newStudents = localStorage.getItem(“students”);
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象