利用bootstrap写的一点本地（localStorage）储存

摘要：

H5本地存储

在以前，我们想要存储一些数据，并且只是在前端使用，服务端并不会使用，我们只能存在cookie里，但是cookie会跟随请求头在客户端和服务端之间来回传递，而且cookie还有一些缺点，H5提供了webStorage的API用来做客户端的数据存储

cookie与webStorage的区别

cookie有大小的限制，只能存储4kb，webStorage可以存储5Mb，cookie还有条数的限制
cookie会跟随请求头在客户端和服务端之间传递，会影响带宽。
cookie需要设置有效期，localStorage是永久保存，sessionStorage是会话保存，
cookie可以设置作用path
cookie的操作较为困难，webStorage的API较为容易
cookie的兼容性比webStorage兼容性好

webStorage包含的存储方式

localStorage ：有效期是永远，永久保存；除非手动删除
sessionStorage：有效期是一次会话时间
globalStorage、indexedDB、webSQL因为兼容性、实用性较差，所以，不使用

localStorage和sessionStorage 的使用方法（API）

localStorage和sessionStorage的使用方法一样
增删改查

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

查： length；key方法（index）得到对应的key getItem(key)/localStorage.a

删： removeItem（key）

清空: clear()

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.panel-body input.form-control{

width: 200px;

}

</style>

<body>

增加

</div>

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

</div>

key-value-list:

</div>

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

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

<hr>

</ul>

</div>

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 +=`

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>

巴特西

利用bootstrap写的一点本地（localStorage）储存

H5本地存储

cookie与webStorage的区别

webStorage包含的存储方式

localStorage和sessionStorage 的使用方法（API）

最新文章

热门文章