localStorage-“增删改查”

最新推荐文章于 2024-06-07 09:17:51 发布

Jack-小俊

最新推荐文章于 2024-06-07 09:17:51 发布

阅读量1.1w

点赞数 1

分类专栏： html 前端学习方法文章标签：前端 html5 存储

本文链接：https://blog.csdn.net/garvisjack/article/details/72639534

版权

前端学习方法同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

学习vue.js，依赖HTML5的新特性来实现前端模拟数据库的存储，和数据的增删改查。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        h3{
            columns: 200px 3;
            column-gap: 60px;
            column-rule: 2px outset #321;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h2>HTML5新特性:localStorage的增删改</h2>
    <h3>
        在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
        localStorage的优势
        1、localStorage拓展了cookie的4K限制
        2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

        localStorage的局限

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

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

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

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

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

这里我们以localStorage来分析
    </h3>
</body>
<script type="text/javascript">
(function(){
    /*判断浏览器是否支持该特性*/
    if(!window.localStorage){
            alert("浏览器不支持localstorage");
            return false;
        }else{
            /*可以简单模拟成前端的数据库，实现增删改查的功能*/
            //增，即给全局变量赋值
            var storage = window.localStorage;
            storage.a = 1;
            storage["b"] = 2;
            storage.setItem("data","i am jsonData"); 

            //查，取得变量的值
            var data = storage.getItem("data");
            console.log(data);

            //删，移除存储里的值
            //storage.clear()清空所有
            storage.removeItem("a");

            //改，即重新给变量赋值
            storage.setItem("b","again data"); 

        }



})()

</script>
</html>

Jack-小俊

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
localStorage-“增删改查”

学习vue.js，依赖HTML5的新特性来实现前端模拟数据库的存储，和数据的增删改查。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{ columns: 200px 3;
复制链接

扫一扫

专栏目录