web storage简述

末蓝、 2022-08-20 06:26 176阅读 0赞

# web storage可以作为替代cookie来保存数据，有两种方法： #

## 1.session storage： ##

会存储数据，但是关闭浏览器之后数据丢失

## 2.local storage： ##

保存数据，并且关闭浏览器后数据仍然存在

//html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="storgeweb.js"></script>
    </head>
    <body>
        <p id="answer1">session保存的数据会在这里出现</p>
        <input type="text" id="input1">
        <input type="button" value="保存数据" οnclick="sessionSet('input1')">
        <input type="button" value="读取数据" οnclick="sessionGet('answer1')">
    
        <p id="answer2">local保存的数据会在这里出现</p>
        <input type="text" id="input2">
        <input type="button" value="保存数据" οnclick="localSet('input2')">
        <input type="button" value="读取数据" οnclick="localGet('answer2')">
    </body>
    </html>

//js

/**
     * Created by Administrator on 2016/2/10.
     */
    //sessionStorge
    function sessionSet(id)
    {
        var target=document.getElementById(id);
        var str=target.value;
        sessionStorage.setItem("message1",str);
    }
    function sessionGet(id)
    {
        var target=document.getElementById(id);
        var str=sessionStorage.getItem("message1");
        target.innerHTML=str;
    }
    
    //localStorge
    function localSet(id)
    {
        var target=document.getElementById(id);
        var str=target.value;
        localStorage.setItem("message2",str);
    }
    function localGet(id)
    {
        var target=document.getElementById(id);
        var str=localStorage.getItem("message2");
        target.innerHTML=str;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 web worker / web socket / web storage 理解

　　　　学习的原网站：[https://www.jianshu.com/p/fe5f19df1e77][https_www.jianshu.com_p_fe5f19df1e

墨蓝/ 2023年08月17日 16:11/ 0 赞/ 124 阅读

相关 html5 Web storage

web storage可以以key/value的方式保存数据，让我们的app在离线的情况下，依然可以读取上次浏览的记录。 web storage 和 cookie的区别 1

缺乏、安全感/ 2022年08月21日 04:19/ 0 赞/ 199 阅读

相关 web storage简述

web storage可以作为替代cookie来保存数据，有两种方法： 1.session storage：会存储数据，但是关闭浏览器之后数据丢失 2.

末蓝、/ 2022年08月20日 06:26/ 0 赞/ 177 阅读

相关区别web storage和cookie

`Web Storage`的概念和`cookie`相似，区别是它是为了更大容量存储设计的。 `Cookie`的大小是受限的，并且每次你请求一个新的页面的时候`Cookie`都

男娘i/ 2022年07月15日 09:51/ 0 赞/ 166 阅读

相关 HTML5中Web Storage

cookie可以在客户端保存诸如用户名等简单的用户信息，主要的问题：大小：cookie的大小被限制在4KB 带宽：cookie是随着HTTP事务一起被发送的，因此会浪

￡神魔★判官ぃ/ 2022年07月13日 00:17/ 0 赞/ 237 阅读

相关 HTML5 Web Storage

HTML5 提供了两种在客户端存储数据的新方法： localStorage 没有时间限制的数据存储。 sessionStorage 针

迈不过友情╰/ 2022年07月11日 16:02/ 0 赞/ 207 阅读

相关 web storage

介绍在html4及以前，在客户端存储用户数据（包括个人信息，浏览痕迹等），依赖的是cookie，而cookie有其天生的劣势，导致有些情况不能满足需求或者影响用户

刺骨的言语ヽ痛彻心扉/ 2022年06月16日 09:58/ 0 赞/ 174 阅读

相关 Web Storage概述

Web Storage概述 ①sessionStorage:将数据保存在sessionStorage中。指的是用户从进入网站到浏览器关闭的这段时间，session对象可以保

素颜马尾好姑娘i/ 2022年04月15日 05:59/ 0 赞/ 307 阅读

相关利用web storage制作简易数据库

利用web storage制作简易数据库如何利用webStorage来制作简易的数据库，利用localStorage中的key和value实现简单表的创建。首先创建一

傷城~/ 2022年04月14日 03:15/ 0 赞/ 227 阅读

相关 Web Storage 前端存储

1、Web Storage 许多小伙伴在学习前端的时候都有一个想法，自己只能写一些静态的数据，如果想动态加载数据的话，就要学习数据库，例如mysql、Sql Serve、

缺乏、安全感/ 2021年12月12日 05:51/ 0 赞/ 345 阅读