本地存储localStorage用法详解

本地存储localStorage用法详解

本文主要详细介绍了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(新学生);//打印出原始对象

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

本地存储localStorage用法详解