JavaScript——WEBAPIS_有关于移动端特效，还有本地存储

程序员文章站 2024-01-07 21:03:58

关于移动端的js特效话题注意以下移动端的js开发，我们一般的开发做法就是使用第三方js框架或者插件去开发，有线考虑一下插件，而不是框架。不太会去写原生的js，因为实在是太过于麻烦了有关于本地存储本地存储的话题随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种 ......

关于移动端的js特效话题

注意以下移动端的js开发，我们一般的开发做法就是使用第三方js框架或者插件去开发，有线考虑一下插件，而不是框架。不太会去写原生的js，因为实在是太过于麻烦了

有关于本地存储

本地存储的话题

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，html5规范提出了相关解决方案。

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionstorage约5m、localstorage约20m

4、只能存储字符串，可以将对象json.stringify() 编码后存储

window.sessionstorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionstorage.setitem(key, value)

获取数据：

sessionstorage.getitem(key)

删除数据：

sessionstorage.removeitem(key)

清空数据：(所有都清除掉)

sessionstorage.clear()

window.localstorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3. 以键值对的形式存储使用

存储数据：

localstorage.setitem(key, value)

获取数据：

localstorage.getitem(key)

删除数据：

localstorage.removeitem(key)

清空数据：(所有都清除掉)

localstorage.clear()

案例：记住用户名

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

案例分析

把数据存起来，用到本地存储
关闭页面，也可以显示用户名，所以用到localstorage
打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
当复选框发生改变的时候change事件
如果勾选，就存储，否则就移除

源代码分析

<body>
    <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
    //首先我们要先获取元素
        var username = document.queryselector('#username');
        var remember = document.queryselector('#remember');
    //开始执行的核心代码块
        if (localstorage.getitem('username')) {
            username.value = localstorage.getitem('username');
            remember.checked = true;
        }
        remember.addeventlistener('change', function() {
            if (this.checked) {
                localstorage.setitem('username', username.value)
            } else {
                localstorage.removeitem('username');
            }
        })
    </script>
</body>