前端localStorage使用

何为localStorage?

在html5中,新增了localStorage和sessionStorage来实现本地存储,它们统称为web Storage.目的是为了解决cookie存储空间不足的问题.这里笔者只提及localStorage的使用

localStorage的优势和不足

优势

存储空间的扩大(一般为5M)
没有时间限制,若不手动删除的话可以永久存储

不足

浏览器大小规范不统一,而且需要IE8以上才支持
值的类型限制在String,可能需要一些转换才能达到我们的目的
不能被爬虫抓取
遵循同源策略,不同协议/域名/端口下的localStorage是不能共用的

localStorage的基本使用

写入一个普通数组

const arr = [1,2,3]
//通过localStorage的setItem方法,第一个参数传入要设置的localStorage的名称,第二个参数传入要存储的数据
localStorage.setItem('arr',arr)
//通过localStorage的getItem方法,传入要查询的localStorage的名称
console.log(localStorage.getItem('arr'))
//推荐下面这种获取方法,避免了查询不存在的存储返回null
console.log(localStorage.getItem('arr') || '[]')

如何判断成功存储在本地呢?我们可以通过谷歌chrome来查看.
- 打开对应的页面
- 按F12调出开发者工具,选择Application选项
- 在左侧选择Storage栏的Local Storage即可查看相应的存储
- 当然也包括了Session Storage,webSQL等的存储,有需要的可以自行查看

其他存储普通类型数据不再依次展示.很多时候我们需要存储的是复杂的数据类型.比如数组或对象,这时如果通过和传入普通数组一样的方式是会出现错误的.例如:

//如果我们想存储某个NodeList
<div><p>1</p>  <p>2</p><p>3</p>
</div>
<script>const p = document.querySelectorAll('p')localStorage.setItem('p',p)console.log(localStorage.getItem('p'))
</script>
//期望之中是将获取到的3个p全部存储起来,但实际上打印出的是:[object NodeList]这么一个东西
//其实这是localStorage在存储的时候要先将p这个类数组转换为字符串,而且由于3个p转换的都是同样的[object NodeList],因此最后只存储了一个字符串

如果我们想存储复杂数据类型,可以通过JSON.stringify和JSON.parse的转换来实现

const arr = [{name:'张三',age:20},{name:'李四',age:25},{name:'王五',age:30}]
//将数组先转化为字符串
localStorage.setItem("userInfo",JSON.stringify(arr))
//再将字符串转化为数组对象,这样就可以将数组正确存储
console.log(JSON.parse(localStorage.getItem('userInfo')))

删除localStorage: localStorage.clear('name') 输出需要删除的名称即可

项目练习(菜单添加删除,本地化存储)

可直接copy查看效果,体会localStorage的用法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>LocalStorage</title><link rel="stylesheet" href="style.css">
</head><body><!--Fish SVG Cred:https://thenounproject.com/search/?q=fish&i=589236--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><pathd="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z" /><pathd="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z" /><pathd="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z" /><pathd="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z" /><pathd="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z" /><circle cx="398.8" cy="273.8" r="14.1" /></g></svg><div class="wrapper"><h2>LOCAL TAPAS</h2><p></p><ul class="plates"><!-- <li>Loading Tapas...</li> --></ul><form class="add-items"><input type="text" name="item" placeholder="Item Name" required autocomplete="off"><input type="submit" value="Add Item"><input class="check-all" type="button" value="Check All"><input class="uncheck-all" type="button" value="Uncheck All"><input class="delete-all" type="reset" value="Delete All"></form></div><script>// <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} >//         <label for="item${i}">${plate.text}</label>window.onload = function () {const addItems = document.querySelector('.add-items')const itemsList = document.querySelector('.plates')const checkAll = document.querySelector('.check-all')const uncheckAll = document.querySelector('.uncheck-all')const deleteAll = document.querySelector('.delete-all')let items = JSON.parse(localStorage.getItem('arr2') || '[]')displayList()addItems.addEventListener('submit', function (e) {e.preventDefault()const text = this.querySelector('[name=item]').valueconst item = {text,checked: false}items.push(item)displayList()this.querySelector('[name=item]').value = ''localStorage.setItem('arr2', JSON.stringify(items))})checkAll.addEventListener('click',function(e) {items.forEach(e => {e.checked = true})localStorage.setItem('arr2', JSON.stringify(items))displayList()})uncheckAll.addEventListener('click',function(e) {items.forEach(e => {e.checked = false})localStorage.setItem('arr2', JSON.stringify(items))displayList()})deleteAll.addEventListener('click',function(e) {localStorage.clear('arr2')items = []displayList()})function displayList() {itemsList.innerHTML = ''items.forEach((e,i) => {const li = document.createElement('li')li.innerHTML = `<input type="checkbox" data-index=${i} id="item${i}" ${e.checked ? 'checked' : ''} ><label for="item${i}">${e.text}</label>`itemsList.appendChild(li)})}}</script>
</body></html>

前端localStorage使用相关推荐

前端:localStorage存入json数据,再次取出时,数据为undefined
代码 Ajax请求: 原因 localStorage只能存储字符串类型的数据解决存入前:需要先将json数据转化为String-->方法:JSON.stringify(obj)将JSON转为 ...
Android本地存储键值对,flutter本地存储键值对简单数据(相当于web的localstorage) 代码实现...
flutter中存储键值对简单数据(相当于前端localstorage概念) 首先需要安装一个官方推荐包: 1 dependencies: 2 flutter: 3 sdk: flutter 4 sh ...
京东前端：三级列表页持续架构优化
为什么80%的码农都做不了架构师?>>> 王向维,京东商城三级列表页架构师.工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前 ...
微前端调研及简析SPA实现原理
最近对微前端讨论很多,梳理下自己对微前端的理解以及业内的一些微前端尝试反馈. 第零部分:自己对微前端理解第一部分:基于Single-SPA微前端的一些demo 第二部分:Single-SPA微前端实 ...
嘿！不用太过于担心的单点故障
不知道从什么时候开始,咱们的面试问题清单里,就明明白白写了,如何处理大流量高并发问题,如何实现高可用?所以,我也经常会去考虑这些问题(哈哈,当然不是为了面试). 大流量,高并发问题,好像已经成了教科书 ...
京东三级列表页持续架构优化
本文作者,王向维,京东商城三级列表页架构师.工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前端即服务器端做了大量的优化工作. 京东三级列表页三级列 ...
2000套微信微信小程序源码+抖音微信小程序源码附开源代码
授权微信小程序SDK(authing-wxapp-sdk)适用于微信微信小程序(打开新窗口)基于微信微信小程序环境.可以使用微信微信小程序源码中的所有方法,比如Get,修改用户信息,添加用户自定义字段 ...
springboot前后端分离项目（图书+博客+聊天室）
一.项目简介项目名称:blc management system(blc MS) 基于Vue CLI4 + SpringBoot开发的前后端分离项目. 基本功能:对博客和书籍进行增删改查,在聊天室点 ...
论文管理系统项目创建及登录
目录一创建项目 1:使用代码生成器创建 2:创建需要的包和类 3:配置数据库等连接二后端开发 1:创建IUserService接口并写登录方法 2:在UserServiceImp中实现登录方法 ...

前端localStorage使用

何为localStorage?

localStorage的优势和不足

优势

不足

localStorage的基本使用

项目练习(菜单添加删除,本地化存储)

前端localStorage使用相关推荐

最新文章

热门文章