【广州前端】- 本地存储localStorage的使用 - 黑马程序员技术交流社区

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

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

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

// 使用方法存储数据
localStorage.setItem('mystorage', 'mystorage');

// 使用属性存储数据
localStorage. mystorage = 'mystorage';

// 使用方法读取数据
var name = localStorage.getItem('mystorage');

// 使用属性读取数据
var mystorage = localStorage. mystorage;

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

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

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

// 存储用户信息
var user = {
  name: 'xiaoqingqing',
  id: '123456',
  isVIP: true,
  arr: [3,2,1],
};

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>