[学习交流] 【广州前端】- 本地存储localStorage的使用

localStorage的使用方法

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

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

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

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

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

// 使用属性存储数据
localStorage. mystorage = '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: [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>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】- 本地存储localStorage的使用

0 个回复