localStorage

最新推荐文章于 2024-07-22 15:19:55 发布

王昭没有君啊

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量1.4k

点赞数 3

分类专栏： JavaScript 文章标签：前端 javascript 网络

本文链接：https://blog.csdn.net/weixin_58448088/article/details/122991281

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

什么是localStorage？

localStorage允许在浏览器中存储键值对的数据。

localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage属性是只读的。

localStorage的优势

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

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage
2、目前所有的浏览器中都会把localStorage的值类型限定为json字符串类型。
3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage本质上是对字符串的读取，如果存储内容多的话就会消耗内存空间，会导致页面变卡。
5、容易被黑客获取到信息，安全性不高。

localStorage的操作方法

localstorage的设定，如下所示：

localStorage.setItem(键名 , 键值);
localStorage.键名 = 键值;

localStorage的获取，如下所示：

localStorage.getItem( 键名 );
localStorage.键名;

localStorage的删除，如下所示

localStorage.removeItem( 键名 );

localStorage的清空，如下所示：

localStorage.clear();

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr = ['北京', '上海', '广州', '深圳', '武汉'];
        const obj = {name:'王昭没有君啊', age:22, sex:'男', addr:'北京'};
        
        //设定localStorage
        //浏览器都会把localStorage的值类型限定为json字符串类型
        localStorage.setItem('arr' , JSON.stringify( arr ));
        localStorage.obj = JSON.stringify( obj );

        //获取localStorage
        console.log(localStorage.getItem( 'arr' ));
        console.log(localStorage.obj);
  
        //删除localStorage
        //localStorage.removeItem('arr');

        //清空localStorage
        localStorage.clear();
        console.log(localStorage);
    </script>
</body>
</html>

Cookie和localStorage的对比

相同：

都是浏览器提供的本地存储数据的功能，本地存储的数据安全性不高，一般都不会存储关键信息

不同点：

1、cookie以键值对形式存储数据，只能存储字符串

localStorage以键值对形式存储数据，可以存储字符串或者json字符串

2、cookie前端后端都能操作

localStorage只能前端程序操作

3、cookie有时效性，过期浏览器自动删除

localStorage没有时效性，除非手动删除，否则会一直存在

4、cookie有路径设定，符合路径的文件才能访问

localStorage路径是根目录路径，所有根目录中的文件都可以访问

5、cookie存储的数据文件大小一般比较小，大小约4k左右

localStorage存储的数据文件大小一般比较大，大约是4M左右

6、cookie操作必须要经过服务器

localStorage可以本地允许操作

实际项目中，一般简单的数据，存储为cookie字符串数字

实际项目中，一般复杂的数据，存储的localStorage 数组对象

王昭没有君啊

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
localStorage

1、什么是localStorage 2、localStorage的优势 3、localStorage的局限 4、localStorage的操作方法 5、cookie和localStorage的对比
复制链接

扫一扫