在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

 

优势：

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

 

局限：

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

 

localStorage是html5的新特性，所以并不是所有的浏览器都支持，因此在使用localStorage时需要先判断浏览器是否支持localStorage。

下面这段代码就是用来判断浏览器是否支持localStorage

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             alert("浏览器支持localStorage")
  11.         } else {
  12.             alert("浏览器不支持localStrorage")
  13.         }
  14.     </script>
  15. </body>
  16. </html>

　　

既然localStorage是用来存取数据的，那我们先从localStorage存数据开始说起

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.a="我是a"
  12.             alert(storage.a)
  13.         } else {
  14.             alert("浏览器不支持localStrorage")
  15.         }
  16.     </script>
  17. </body>
  18. </html>

　　

上面的代码我们在localStorage中存取了一个字段a，值是”我是a”

localStorage支持多种存取值的方式，我们一一来看一下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             //第一种存值方式
  12.             storage.a="我是a"
  13.             //第二种存值方式
  14.             storage['b']=100
  15.             //第三种存值方式
  16.             storage.setItem('c',"我是c")
  17.  
  18.  
  19.             //第一种取值方式
  20.             var one=storage.a;
  21.             alert("第一种取值："+one)
  22.  
  23.             //第二种取值方式
  24.             var two=storage['b']
  25.             alert("第二种取值："+two)
  26.  
  27.             //第三种取值方式
  28.             var three=storage.getItem('c')
  29.             alert("第三种取值："+three)
  30.             
  31.         } else {
  32.             alert("浏览器不支持localStrorage")
  33.         }
  34.     </script>
  35. </body>
  36. </html>

　　

上面介绍了localStorage存值与取值的三种方式，具体用哪种方式都可以，其中官方推荐的是getItem\setItem这两种方法对其进行存取

 

那么数据存放进去我们如果想要修改该怎么办？别急，看下面代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.setItem('a',"我是a")
  12.             var before=storage.getItem('a')
  13.             alert("修改前的a："+before)
  14.  
  15.             storage.setItem('a',"a被修改了")
  16.             var after=storage.getItem('a')
  17.             alert("修改之后的a："+after)
  18.             
  19.         } else {
  20.             alert("浏览器不支持localStrorage")
  21.         }
  22.     </script>
  23. </body>
  24. </html>

　　

localStorage的删除：

1、清空localStorage：调用localStorage的clear方法将清空localStorage中的所有内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.a="我是a"
  12.             storage['b']=100
  13.             storage.setItem('c',"我是c")
  14.             alert("删除前的a："+storage.getItem('a'))
  15.             storage.clear()//清空localStorage
  16.             alert("删除后的a："+storage.getItem('a'))
  17.             
  18.         } else {
  19.             alert("浏览器不支持localStrorage")
  20.         }
  21.     </script>
  22. </body>
  23. </html>

　　

2、删除某个值：调用localStorage的removeItem()方法删除某个值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.a="我是a"
  12.             storage['b']=100
  13.             storage.setItem('c',"我是c")
  14.             alert("删除前的a："+storage.getItem('a'))
  15.             storage.removeItem('a')
  16.             alert("删除后的a："+storage.getItem('a'))
  17.             
  18.         } else {
  19.             alert("浏览器不支持localStrorage")
  20.         }
  21.     </script>
  22. </body>
  23. </html>

　　

localStorage的键获取

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.a="我是a"
  12.             storage['b']=100
  13.             storage.setItem('c',"我是c")
  14.             for(var i=0;i<storage.length;i++){
  15.                 var key=storage.key(i);
  16.                 alert(key);
  17.             }
  18.             
  19.         } else {
  20.             alert("浏览器不支持localStrorage")
  21.         }
  22.     </script>
  23. </body>
  24. </html>

　　

 

1、localStorage中存放的是String类型的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             storage.a=100
  12.             alert(typeof(storage.a))
  13.             
  14.         } else {
  15.             alert("浏览器不支持localStrorage")
  16.         }
  17.     </script>
  18. </body>
  19. </html>

　　

我们看到上述代码打印的结果为string，虽然我们存放的是int类型的值，但是localStorage还是把它当做string类型来存放

 

2、如果我们需要将JSON格式的数据存放到localStorage中，则需要借助JSON.stringify()这个方法，来将JSON转换成为JSON字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             var data={
  12.                 name:'xiaowang',
  13.                 sex:'man',
  14.                 love:'篮球'
  15.             };
  16.             var d=JSON.stringify(data);
  17.             storage.setItem("data",d);
  18.             console.log(storage.data);
  19.             
  20.         } else {
  21.             alert("浏览器不支持localStrorage")
  22.         }
  23.     </script>
  24. </body>
  25. </html>

　　

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>localStorage</title>
  6. </head>
  7. <body>
  8.      <script>
  9.         if (window.localStorage) {
  10.             var storage=window.localStorage;
  11.             var data={
  12.                 name:'xiaowang',
  13.                 sex:'man',
  14.                 love:'篮球'
  15.             };
  16.             var d=JSON.stringify(data);
  17.             storage.setItem("data",d);
  18.             var json=storage.getItem('data')
  19.             var jsonObj=JSON.parse(json)
  20.             alert(typeof(jsonObj))//结果是object
  21.             
  22.         } else {
  23.             alert("浏览器不支持localStrorage")
  24.         }
  25.     </script>
  26. </body>
  27. </html>

　　

版权声明：本文为wgblog-code原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wgblog-code/p/11549707.html