本地存储localStorage的使用getItem(name)：根据指定的名字name获取对应的值。 setItem(

localStorage的使用方法

localStorage的方法非常简单，就是基本的增删查：

getItem(name)：根据指定的名字name获取对应的值。
setItem(name, value)：为指定的name设置一个对应的值。
removeItem(name)：删除由name指定的名值对。

想要修改某项的话，直接用setItem方法重新设置值即可。

由于每个项目都是作为属性存储在localStorage对象上，所以可以通过点语法或者方括号语法访问属性来读取中值，设置也一样，如下：

// 使用方法存储数据

localStorage.setItem(

'mystorage'

);

// 使用属性存储数据

localStorage.

mystorage

;

// 使用方法读取数据

var

name = localStorage.getItem(

'mystorage'

);

// 使用属性读取数据

var

mystorage

= localStorage.

mystorage

;

不过，还是建议大家使用方法而不是属性来访问数据，以免某个键会意外重写该对象上已经存在的对象。

localStorage的优缺点

浏览器对localStorage的大小限制是5MB（每个来源），比cookie的大了不少，基本可以满足日常需求了。

localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。所以在存储一些复杂数据类型时可能有些麻烦，通常的做法是先使用JSON.stringfy()方法将其转换为字符串后存储，使用时取出后再使用JSON.parse()方法进行还原。

// 存储用户信息

var

user = {
name:

'xiaoqingqing'

,
id:

'123456'

,
isVIP:

true

,
arr: [

],
};

var

str =

JSON

.stringfy(user);
localStorage.setItem(

'userInfo'

, str);

// 提取用户信息

var

infoStr = localStorage.getItem(

'userInfo'

);

var

info =

JSON

.parse(infoStr);

一个例子

这个demo

配合FileReader实现了本地文件读取和存储，localStorage的三个方法都有用到，源码：

[AppleScript]

纯文本查看

复制代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<input type="button" value="存数据" id="setData">

<input type="button" value="取数据" id="getData">

</body>

<script>

/*

有些情况下，需要在浏览器端存储一些数据，这些数据就可以使用localStorage进行存储

这个东西是浏览器里面提供的一个对象

该对象可以在浏览器厘米存储一些本地数据

怎么用

存储

localStrorage.setItem(键,值);

该方式存储数据，只能存储字符串，不能存储复杂类型，如果你非要往里面存储复杂类型，会自动调用对象的toString

()方法，转换为字符串转换，再存储

如果要往里面存储复杂数据，请先把复杂数据转换为json格式字符串在存储

获取

localStroage.getitem(键);

*/

let btn1 = document.querySelector('#setData');

let btn2 = document.querySelector('#getData');

btn1.onclick = function(){

// 存储数据

// localStorage.setItem('name','狗蛋')

// 存储数据

// let arr = [

// {name:'狗蛋',age:12},

// {name:'翠花',age:10},

// ];

// 调用方法存数据

// localStorage.setItem('arrData',arr);

// 不能直接存储复杂类型，需要存储的话，请使用JSON格式

// let data = '{ "name":"狗蛋","age":12 }';

// let data = "{ \"name\":\"狗蛋\" }";

// localStorage.setItem('Object',data);

// 将js里面的对象转换为json格式字符串，再存储

let arr = [

{name:'狗蛋',age:12},

{name:'翠花',age:10},

];

let str = JSON.stringify(arr);

console.log(str);

localStorage.setItem('wbData',str);

}

btn2.onclick = function(){

// console.log(localStorage.getItem('name'));

// console.log(localStorage.getItem('arrData'));

// console.log(localStorage.getItem('Object'));

// 把数据取出来

let result = localStorage.getItem('wbData');

console.log(result);

//把读取的json格式字符串，转换为数组

let arr = JSON.parse(result);

console.log(arr);

}

</script>

</html>