本地存储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.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第⼀条数据的变量名(键值)
//遍历并输出localStorage⾥存储的名字和值
for(var i=0; i<localStorage.length;i++){
console.log('localStorage⾥存储的第'+i+'条数据的名字为：'+localStorage.key(i)+'，值为：'+Item(localStorage.key(i)));
}
删除某个变量
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"]
LocaleString(); // "aa,bb,cc"
将JSON存储到localStorage⾥
var students = {
xiaomin: {
sessionstorage和localstoragename: "xiaoming",
grade: 1
},
teemo: {
name: "teemo",
grade: 3
}
}
students = JSON.stringify(students); //将JSON转为字符串存到变量⾥
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage⾥
var newStudents = Item("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。