本文主要详细介绍了localStorage的用法,有一定的参考价值,感兴趣的朋友可以参考一下。
一、什么是localStorage?
在HTML5中,添加了一个新的localStorage特性。该特性主要用作localStorage,解决了cookie存储空间不足的问题(cookie中每个cookie的存储空间为4k)。一般localStorage中的浏览器都支持5M的大小,不同的浏览器会有所不同。
二、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.clear() //未定义
Local//storage {length: 0}存储数据。
存储数据
Local.setItem (name ,蔡斌)//存储一个名称和值为蔡斌的变量。
localStorage.name=蔡斌;//相当于上面的命令
本地//存储{名称:“蔡斌”,长度:1}读取数据
读出数据
local storage . getitem( name )//蔡斌,读取存储在本地存储对象中的变量名name的值。
localStorage.name //蔡斌
LocalStorage.valueOf() //读取LocalStorage上存储的所有数据
LocalStorage.key(0) //读取第一条数据的变量名(键值)
//遍历并输出存储在localStorage中的名称和值。
for(var I=0;ilocalStorage.lengthi ){
console . log( local storage 中存储的 I 数据的名称为: localStorage.key(i ),值为: local storage . getitem(local storage . key(I))));
}
删除变量
local storage . remove item( name );//未定义
Local//storage {length: 0}可以看到之前保存的name变量已经从localStorage中删除了。
检查变量是否保存在localStorage中。
//这些数据都是经过测试的,而且是在我目前的环境下,只是演示~
local storage . hasownproperty( name )//true
local storage . hasownproperty( sex )//false
将数组转换为本地字符串
var arr=[aa , bb , cc ];//[aa , bb , cc]
localStorage.arr=arr //[aa , bb , cc]
local storage . arr . tolocalestring();//aa,bb,cc
将JSON存储在localStorage中
var学生={
肖敏:{
姓名:小明,
等级:1
},
teemo: {
姓名:“teemo”,
等级:3
}
}
students=JSON.stringify(学生);//将JSON转换成字符串并存储在变量中
console.log(学生);
localStorage.setItem(students ,学生);//将变量保存到localStorage中
var new students=local storage . getitem( students );
newStudents=JSON.parse(学生);//转换为JSON
console.log(新学生);//打印出原始对象
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。