localStorage详细总结

最新推荐文章于 2024-07-01 15:30:29 发布

薛定谔的猫≮

最新推荐文章于 2024-07-01 15:30:29 发布

阅读量360

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_48830149/article/details/106994215

版权

本文详细介绍了HTML5中的localStorage特性，包括其简介、优势与局限、使用方法（如存储、删除、键获取）以及注意事项。localStorage提供了一个5M的本地存储空间，解决了cookie存储限制，但仅支持字符串类型，并在隐私模式下不可读取。在使用时需要注意数据类型转换，如将JSON对象转为字符串存储。

摘要由CSDN通过智能技术生成

localStorage详细总结

一、localStorage简介：

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

二、localStorage的优势与局限：

优势：

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

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

局限：

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

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

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

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

5、localStorage不能被爬虫抓取到

三、localStorage的使用：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
     <script>
        if (window.localStorage) {
            alert("浏览器支持localStorage")
        } else {
            alert("浏览器不支持localStrorage")
        }
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
     <script>
        if (window.localStorag

最低0.47元/天解锁文章

薛定谔的猫≮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
localStorage详细总结

localStorage详细总结一、localStorage简介：在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与局限：优势：1、localStorage拓展了cookie的4K限制2、local
复制链接

扫一扫