本地存储的使用和方法

本地存储

首先本地存储的核心属性是localStorage

它的使用可以使得我们想要的数据不会因为刷新页面或重进页面而被浏览器删除。

使用方法

1.本地储存里添加值

再页面代码中添加一个script的标签，并在里面添加一段代码

<script>
         localStorage.setItem("key","123");
   </script>

然后运行发现，运行页面，打开浏览器控制台（按下键盘上的F12或点击鼠标的右键再页面菜单里选择“检查”），然后点击Application,在他下面左侧的菜单栏里选择Local Storage，然后点击下面的链接名，即可看到本地储存里的值，如下图：

然后发现似乎浏览器重新进入页面或者刷新页面都无法把这个值给删除掉

2.本地储存删除值

也同时再上面页面中的script的标签中编写一串代码

 	<script>
      localStorage.clear("key");
    </script>

然后运行代码后发现，你之前在网页上的本地储存里的值被删除了

3.获取本地储存里的值

按着前面的网页写，也同时在script标签中输入以下代码:

	<script>
      //向本地储存存入数据
      localStorage.setItem("key","123");
      //将本地储存里的数据获取出来，然后将他赋予给arr变量
      var arr=localStorage.getItem("key");
      //在控制台中打印获取的本地数据
      console.log(arr);
    </script>

很明显的的控制台中显示我们想要的结果，如下图