in below code to :
i need html+js+css to create app like phonebook that store in local without any server like nodejs or other to:
save, edit, add to csv or text local file and load/show that with search:
ردیف 	نام شرکت / شخص 	حقوقی /حقیقی /همکار 	شناسه ملی / کد ملی 	بانک 	شماره حساب 	شماره کارت 	شماره شبا 	تلفن 	توضیحات 


Creating a simple phonebook application that can save, edit, load, and export data to a CSV or text file using only HTML, JavaScript, and CSS is a great project. Below is an example of how you can implement such an application. The application will utilize the `localStorage` feature of web browsers to store data locally.

Here's a basic implementation:

### HTML (index.html)

```html
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phonebook App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>برنامه دفترچه تلفن</h1>
        
        <form id="phonebook-form">
            <input type="hidden" id="edit-index" value="-1">
            <input type="text" id="company-name" placeholder="نام شرکت / شخص" required>
            <select id="type">
                <option value="حقوقی">حقوقی</option>
                <option value="حقیقی">حقیقی</option>
                <option value="همکار">همکار</option>
            </select>
            <input type="text" id="national-code" placeholder="شناسه ملی / کد ملی" required>
            <input type="text" id="bank" placeholder="بانک" required>
            <input type="text" id="account-number" placeholder="شماره حساب" required>
            <input type="text" id="card-number" placeholder="شماره کارت" required>
            <input type="text" id="shaba" placeholder="شماره شبا" required>
            <input type="text" id="phone" placeholder="تلفن" required>
            <textarea id="description" placeholder="توضیحات"></textarea>
            <button type="submit">ذخیره</button>
        </form>

        <input type="text" id="search" placeholder="جستجو..." oninput="searchEntries()">
        <table id="phonebook-table">
            <thead>
                <tr>
                    <th>ردیف</th>
                    <th>نام شرکت / شخص</th>
                    <th>حقوقی / حقیقی / همکار</th>
                    <th>شناسه ملی / کد ملی</th>
                    <th>بانک</th>
                    <th>شماره حساب</th>
                    <th>شماره کارت</th>
                    <th>شماره شبا</th>
                    <th>تلفن</th>
                    <th>توضیحات</th>
                    <th>عملیات</th>
                </tr>
            </thead>
            <tbody id="phonebook-body">
            </tbody>
        </table>
        <button id="export-csv">خروجی CSV</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css)

```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea, button {
    margin: 5px 0;
    padding: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: center;
}

button {
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}
```

### JavaScript (script.js)

```javascript
document.getElementById('phonebook-form').addEventListener('submit', function (e) {
    e.preventDefault();
    const index = document.getElementById('edit-index').value;
    const entries = JSON.parse(localStorage.getItem('phonebook')) || [];
    
    const newEntry = {
        name: document.getElementById('company-name').value,
        type: document.getElementById('type').value,
        nationalCode: document.getElementById('national-code').value,
        bank: document.getElementById('bank').value,
        accountNumber: document.getElementById('account-number').value,
        cardNumber: document.getElementById('card-number').value,
        shaba: document.getElementById('shaba').value,
        phone: document.getElementById('phone').value,
        description: document.getElementById('description').value,
    };

    if (index === '-1') {
        entries.push(newEntry);
    } else {
        entries[index] = newEntry;
    }

    localStorage.setItem('phonebook', JSON.stringify(entries));
    loadEntries();
    clearForm();
});

function loadEntries() {
    const entries = JSON.parse(localStorage.getItem('phonebook')) || [];
    const phonebookBody = document.getElementById('phonebook-body');
    phonebookBody.innerHTML = '';

    entries.forEach((entry, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>${entry.name}</td>
            <td>${entry.type}</td>
            <td>${entry.nationalCode}</td>
            <td>${entry.bank}</td>
            <td>${entry.accountNumber}</td>
            <td>${entry.cardNumber}</td>
            <td>${entry.shaba}</td>
            <td>${entry.phone}</td>
            <td>${entry.description}</td>
            <td>
                <button onclick="editEntry(${index})">ویرایش</button>
                <button onclick="deleteEntry(${index})">حذف</button>
            </td>
        `;
        phonebookBody.appendChild(row);
    });
}

function clearForm() {
    document.getElementById('phonebook-form').reset();
    document.getElementById('edit-index').value = '-1';
}

function editEntry(index) {
    const entries = JSON.parse(localStorage.getItem('phonebook'));
    const entry = entries[index];

    document.getElementById('company-name').value = entry.name;
    document.getElementById('type').value = entry.type;
    document.getElementById('national-code').value = entry.nationalCode;
    document.getElementById('bank').value = entry.bank;
    document.getElementById('account-number').value = entry.accountNumber;
    document.getElementById('card-number').value = entry.cardNumber;
    document.getElementById('shaba').value = entry.shaba;
    document.getElementById('phone').value = entry.phone;
    document.getElementById('description').value = entry.description;
    document.getElementById('edit-index').value = index;
}

function deleteEntry(index) {
    const entries = JSON.parse(localStorage.getItem('phonebook'));
    entries.splice(index, 1);
    localStorage.setItem('phonebook', JSON.stringify(entries));
    loadEntries();
}

function searchEntries() {
    const searchTerm = document.getElementById('search').value.toLowerCase();
    const entries = JSON.parse(localStorage.getItem('phonebook')) || [];
    const filteredEntries = entries.filter(entry => 
        Object.values(entry).some(value => 
            value.toLowerCase().includes(searchTerm)
        )
    );

    const phonebookBody = document.getElementById('phonebook-body');
    phonebookBody.innerHTML = '';

    filteredEntries.forEach((entry, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>${entry.name}</td>
            <td>${entry.type}</td>
            <td>${entry.nationalCode}</td>
            <td>${entry.bank}</td>
            <td>${entry.accountNumber}</td>
            <td>${entry.cardNumber}</td>
            <td>${entry.shaba}</td>
            <td>${entry.phone}</td>
            <td>${entry.description}</td>
            <td>
                <button onclick="editEntry(${index})">ویرایش</button>
                <button onclick="deleteEntry(${index})">حذف</button>
            </td>
        `;
        phonebookBody.appendChild(row);
    });
}

document.getElementById('export-csv').addEventListener('click', function() {
    const entries = JSON.parse(localStorage.getItem('phonebook')) || [];
    let csvContent = "data:text/csv;charset=utf-8,";
    csvContent += "ردیف,نام شرکت / شخص,حقوقی / حقیقی / همکار,شناسه ملی / کد ملی,بانک,شماره حساب,شماره کارت,شماره شبا,تلفن,توضیحات
";

    entries.forEach((entry, index) => {
        const row = `${index + 1},${entry.name},${entry.type},${entry.nationalCode},${entry.bank},${entry.accountNumber},${entry.cardNumber},${entry.shaba},${entry.phone},${entry.description}`;
        csvContent += row + "\n";
    });

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "phonebook.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

// Load entries on page load
window.onload = loadEntries;
```

### How It Works:

1. **HTML Structure**: The HTML file provides a form for data input and a table to display the entries. It includes input fields for each required data point.
  
2. **CSS Styling**: Basic styling is provided to make the app look clean and simple.

3. **JavaScript Functionality**:
   - **Adding/Editing Entries**: The form captures input and either adds a new entry or edits an existing one based on the hidden input.
   - **Loading Entries**: The entries are loaded from `localStorage` and displayed in a table.
   - **Searching**: The search function filters the displayed entries based on the input.
   - **Exporting to CSV**: A button allows users to export all entries to a CSV file.

### To Use:

1. Create three files: `index.html`, `styles.css`, and `script.js`.
2. Copy the respective code into each file.
3. Open `index.html` in a web browser to run the app.

This application will allow you to manage a simple phonebook directly in your browser without needing a server. You can add, edit, delete, search, and export entries.