实现搜索历史的记录（记录到本地存储中）

什么是本地存储：把数据存储到电脑本地（电脑的某个文件里面）通过浏览器来存储的
有哪些本地存储的方式： localStorage sessionStorage
- localStorage 永久存储只要不清空浏览器记录和手动删除存储记录存储是一只存在的
- sessionStorage 临时存储当浏览器关闭的时候就自动清空
为什么要使用本地存储来实现搜素历史记录：搜素历史记录的记录信息永久存储的类似JD淘宝搜索记录都是保存在本地存储
本地存储 localStorage的使用
- 获取本地存储的对象
  
  window.localStorage
- 使用本地存储对象实现数据存储
  
  window.localStorage.setItem('键',要存储的值);
- 使用本地存储来获取存储的数据
  
  window.localStorage.getItem('键')
- 注意:本地存储的存储值和获取值都是只能是字符串类形（JSON格式的字符串）
- 如果需要存储复杂类型的数据比如对象数组, 就要把对象数组转换成json格式的字符串, 再存储到本地存储中
  - JSON.stringify(arr) 转成JSON格式的字符串
- 获取本地存储中的JSON字符串,如果需要使用数组一些方法push(), 把JSON格式字符串转成数组 JSON.parse()
  
  给数组添加数据 arr.push({'search':'新的值'})
- 添加了新的值 arr.push({'search':'新的值'})之后, 又要把push之后的数组存储到本地存储中
  
  window.localStorage.setItem('searchData',JSON.stringify(arr));
- 本地存储的注意点
  - 本地存储中存储的值只能是字符串类型存储类型数据使用JSON.stringify(复杂类型数据) 再存储到本地存储
  - 获取本地存储的值如果是复杂类型的数据的字符串使用JSON.parse(复杂类型字符串) 转成JS能够识别的复杂类型对象或者数组

实现搜索历史的记录（记录到本地存储中）相关推荐

html5 js保存token,vue生成token并保存到本地存储中
这篇文章主要为大家详细介绍了vue生成token并保存到本地存储中,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 首先回顾一下token: to ...
如何将常用的软件上传到ESXi本地存储中管理
一.如何将常用的软件上传到ESXi本地存储中管理在使用虚拟机时,我们可能需要多个软件.比如部署操作系统需要CentOS或者Windows的镜像,再基于操作系统安装数据库可能有需要SQLServer. ...
在本地存储中存入和取出对象
运用的是 JSON.stringify() 和 JSON.parse() 存入 //部分代码 //localStorage.setItem(key,JSON.stringify(value))l ...
vue项目token放在哪里_vue开发--生成token并保存到本地存储中
首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver ...
vue实现搜索框记录搜索历史_使用JS location实现搜索框历史记录功能_苏颜_前端开发者...
首先,来看下效果图(样式什么的就不必吐槽了哈) 搜索记录: //用于保存记录信息 * { margin: 0; padding: 0; } input { border: 0; vertical-al ...
android 历史搜索布局,《Android APP可能有的东西》之UI篇：流式标签搜索历史
说在前面很多APP都有热门排行热门搜索什么的,这个时候可能需要用到标签,也就是流式布局,而还有可能用到的就是搜索历史记录,这种一般都是使用listview展示.但是,相当有可能是反过来的UI展示效果 ...
vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...

实现搜索历史的记录（记录到本地存储中）

实现搜索历史的记录（记录到本地存储中）相关推荐

最新文章

热门文章

实现搜索历史的记录 （记录到本地存储中）

实现搜索历史的记录 （记录到本地存储中）相关推荐

最新文章

热门文章

实现搜索历史的记录（记录到本地存储中）

实现搜索历史的记录（记录到本地存储中）相关推荐