利用h5的新特性在客户端存储数据

  感觉做项目能学到的很多新东西啊，最近项目里有个需求，要展示用户的搜索记录。由于我是第一次遇到这个需求，于是我就先百度了一下，发现了h5的一个黑科技

在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

  于是我就打算用localStorage来实现历史搜索这个功能。先百度了一下他的api,发现他是用setItem来存储数据，用getItem来删除数据的。

let storage=window.localStorage;//先定义并初始化变量
let history_keywords=['a','b','c','d','e'];//定义要存储的数据，实际项目中history_keywords是获取用户输入的关键词
history_keywords=JSON.stringify(history_keywords); //stringify()用于从一个对象解析出字符串,方面存储数据
storage.setItem('options',history_keywords);//把history_keywords存储进storage，键为options
console.log(storage);//输出的内容看下图

let get_storage=storage.getItem('options');//取出数据
console.log(get_storage);//输出为["a","b","c","d","e"]

  这是console.log(storage);输出的数据
  那么如何删除里面的指定数据呢？

let options=JSON.parse(localStorage.getItem('options'));//将localStorage里面的对象转成数组进行增删
console.log(options);//['a','b','c','d','e'];
let arr1=options.filter((val_options)=>{
    return val_options!==options_val;
});//返回一个新数据
localStorage.setItem('options',JSON.stringify(arr1));//把去除元素后的新数组赋值给localStorage
alert('该条历史搜索清除成功');
window.location.reload();
console.log(localStorage);