localStorage用法总结

一、什么是localStorage、sessionStorage

在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、loaclStorage本质上是对字符串的读取，如果读取内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

三、localStroage与sessionStorage的区别

二者唯一的区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

四、localStorage常用API

名称	作用
clear	清空localStorage上存储的数据
setItem	存储数据
getItem	读取数据
removeItem	删除某个具体变量
hasOwnProperty	检查localStorage上是否保存了变量X，需要传入X
key	读取第i个数据的名字或称为键值（从0开始计算）
length	localStorage存储变量的个数
propertyIsEnumerable	用来检测属性是否属于某个对象
toLocalString	将（数组）转为本地字符串
valueOf	获取所有存储的数据

 （1）存储数据

localStorage.setItem('key', 'value')

（2）读取数据

localStorage.getItem('key')

（3）删除数据

localStorage.removeItem('key')

（4）清空localStorage

localStorage.clear()

（5）检查localStorage里是否保存某个变量

localStorage.hasOmnProperty('key')

（6）将数组转为本地字符串

localStorage.arr.toLocalString()

（7）将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); // 打印出原先对象

作者：潺公子
链接：https://www.jianshu.com/p/39ba41ead42e
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。