利用bootstrap写本地（localStorage）储存

最新推荐文章于 2023-11-15 20:52:13 发布

转载最新推荐文章于 2023-11-15 20:52:13 发布 · 751 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a1523e9f265da432240d855

文章标签：

#前端 #javascript #ViewUI

H5本地存储

在以前，我们想要存储一些数据，并且只是在前端使用，服务端并不会使用，我们只能存在

cookie

里，但是

会跟随请求头在客户端和服务端之间来回传递，而且

还有一些缺点，

提供了

webStorage

的

API

用来做客户端的数据存储

cookie与webStorage的区别

1. cookie

有大小的限制，只能存储

4kb

，

webStorage

可以存储

5Mb

，

cookie

还有条数的限制

2. cookie

会跟随请求头在客户端和服务端之间传递，会影响带宽。

3. cookie

需要设置有效期，

localStorage

是永久保存，

sessionStorage

是会话保存，

4. cookie

可以设置作用

path

5. cookie

的操作较为困难，

webStorage

的

API

较为容易

6. cookie

的兼容性比

webStorage

兼容性好

webStorage包含的存储方式

1. localStorage

：有效期是永远，永久保存；除非手动删除

2. sessionStorage

：有效期是一次会话时间

3. globalStorage

、

indexedDB

、

webSQL

因为兼容性、实用性较差，所以，不使用

localStorage和sessionStorage 的使用方法（API）

增

改：

localStorage.setItem(key,value)/ localStorage.a = 1

查：

length

；

key

方法（

index

）得到对应的

key getItem(key)/localStorage.a

删：

removeItem

（

key

）

清空

: clear()

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<style>

.panel-body input.form-control{

width: 200px;

}

</style>

<body>

<div class="container">

<div class="panel panel-primary insert">

<div class="panel-heading">

增加

</div>

<div class="panel-body">

<label for="">key:</label>

<input type="text" id="key" class="form-control">

<label for="">value:</label>

<input type="text" id="value" class="form-control">

<button onclick="save()">save</button>

</div>

<div class="panel panel-primary select">

<div class="panel-heading">

key-value-list:

</div>

<div class="panel-body">

<button onclick="select()" class="btn btn-success">select</button>

<button onclick="abc()" class="btn btn-warning">clear</button>

<hr>

<ul class="list-group">

</ul>

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

function save(){

var key = $(".insert #key").val()

var value = $(".insert #value").val()

localStorage.setItem(key,value)

//select()

}

function select(){

let str = ''

for(var i = 0;i < localStorage.length;i ++){

var key = localStorage.key(i)

var value = localStorage.getItem(key)

str +=`

<li class="list-group-item clearfix">

key: <span class="label label-primary key">${key}</span>

value: <span class="label label-primary value">${value}</span>

<button data-key='${key}' class="btn btn-danger delete pull-right">delete</button>

</li>

}

$(".select ul").html(str)

}

function abc(){

localStorage.clear()

$(".select ul").html("")

}

$(".select ul").delegate(".delete",'click',function () {

console.log(1)

var key = $(this).data("key")

localStorage.removeItem(key)

$(this).parent().remove())

</script>

</body>

想要学习前端开发的同学，可以加群：

543627393

学习哦！